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ele 

Vue.js 核 心 团队 成 员 、Apollo GraphQL 
贡献 者 、Livestorm 公 司 前 端 工程 师 。 他 
分 别 将 Vue.js 与 Meteor 和 Apollo 
GraphQL 集 成 (vue-meteor 和 vue- 
apollo ) ， a 
和 实时 的 Web 应 用 程序 ， 过 vue-- 
i 
为 开源 社区 持续 做 出 贡献 。 


周智 勋 

旅居 昆明 ， 从 事 IT 行 业 10 余 载 ， 会 写 一 
些 代码 。 闲 时 跑步 打球 ， 写 写 博 客 : 破 船 
之 家 。 


张 伟 杰 

会 跳舞 的 产品 经 理 不 是 一 个 好 程序 员 。 
爱 跳舞 、 爱 数码 、 爱 技术 ， 文 艺 青年 的 外 
表 ， 技 术 宅 男 的 内 心 。 一 个 时 常 打破 他 人 
认 知 、 无 法 被 定义 的 人 。 


孔 亚 杰 

一 只 后 知 后 觉 的 “程序 猿 ”， 爱 篮球 、 爱 
音乐 、 爱 游戏 ， 立 志 成 为 一 名 优秀 的 前 端 
架构 师 。 目 前 就 职 于 上 海 一 家 人 工 智能 猫 
头 招聘 平台 。 


李 骏 
软件 工程 师 ， 有 多 年 手机 游戏 和 Web 前 端 
开发 经 验 ， 现 就 职 于 北京 一 家 科技 公司 。 
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内 容 


本 书 基于 6 个 项 目 来 引导 读者 深入 理解 Vue.js。 
用 户 体验 创建 第 一 个 Web 应 用 ; 随后 通过 创建 基于 浏 











具 和 预 处 理 器 讲解 如 何 使 用 播 件 创建 多 页 面 应 用 ， 并 为 应 用 创建 高 效 、 高 性 能 的 组 件 ; 接 下 来 创建 一 个 在 
线 商 店 并 对 其 进行 优化 ; 最 后 将 Vue 与 实时 库 Meteor 集成 ， 创 下 








提 要 





区 中 首先 介绍 Vue 的 基础 知识 ， 并 使 用 指令 和 丰富 的 


览 器 的 游戏 来 介绍 动画 和 交互 性 ; 然后 通过 可 用 的 工 


网 和 











一 个 显示 实时 数据 的 仪表 盘 。 


本 书 适合 Vue 初学 者 、 开 发 者 ， 以 及 对 Vue 感 兴趣 的 前 端 开发 人 员 阅 读 。 
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了 中 


前 


作为 一 个 相对 较 新 的 UI 库 ，Vue 对 于 当前 主流 的 JavaScript 库 (如 Angular 和 React ) 来 说 
有 很 大 的 威胁 。Vue 有 很 多 优点 : 易 用 、 灵 活 、 速 度 快 ， 并 且 为 构建 完整 的 现代 Web 应 用 提供 了 
所 需 的 所 有 功能 。 


Vue 渐进 式 的 特点 使 得 开发 者 能 够 轻松 上 手 ， 然 后 使 用 更 高 级 的 功能 对 应 用 进行 扩展 。Vue 
还 具有 一 个 丰富 的 生态 系统 ， 包 括 官方 提供 的 一 些 库 ， 用 于 路 由 、 状 态 管理 、 脚 手 架 ( vue-cli ) 
和 单元 测试 。Vue 甚至 开 箱 即 用 地 支持 服务 端 渔 染 。 


这 一 切 都 要 归功 于 一 个 令 人 惊叹 的 社区 ， 以 及 一 支 了 不 起 的 核心 团队 。 是 他 们 推动 着 Web 
技术 的 创新 ， 并 使 得 Vue 成 为 一 个 可 持续 发 展 的 开源 项 目 。 


为 了 帮助 开发 者 学 习 Vue 并 利用 Vue 构建 应 用 , 本 书 由 6 个 指南 构成 。 每 个 指南 都 是 一 个 具 
体 的 项 目 。 在 学 习 每 个 项 目 时 ,开发 者 将 自己 动手 构建 一 个 实际 的 应 用 。 这 也 就 意味 着 ,学 完 本 
书 时 ， 开 发 者 将 拥有 6 个 可 以 运行 的 Vue 应 用 。 


就 如 Vue 一 样 , 书 中 的 这 些 项 目 也 是 渐进 式 的 ,一步 一 步 引 入 新 的 知识 点 , 使 得 开发 者 能 轻 
松 地 掌握 Vue。 第 一 个 项 目 不 需要 太 多 配置 和 构建 工具 ,所 以 开发 者 可 以 立即 构建 出 一 个 实际 的 
应 用 。 接 着 ， 更 高 级 的 知识 点 会 被 逐步 引入 项 目 中 。 当 学 完 本 书 时 ， 开 发 者 将 拥有 一 套 完 整 的 
Vue 开发 技能 。 




















































































































本 书 涵盖 的 内 容 
第 1 章 , Vue 开发 入 门 。 这 一 章 介绍 如 何 利用 动态 模板 创建 一 个 基本 的 Vue 应 用 , 以 及 如 何 
通过 指令 实现 基本 的 交互。 


第 2 章 ， 项 目 1: Markdown 笔记 本 。 这 一 章 探 索 创建 一 个 完整 的 Vue 应 用 要 使 用 的 功能 ， 
例如 计算 属性 、 函 数 、 生 命 周 期 钩子 、 列 表 泻 染 、DOM 事件 、 动 态 CSS 、 模 板 条 件 和 过 滤器 格 
式 化 等 。 


第 3 章 ， 项 目 2: 城堡 决斗 游戏 。 这 一 章 阐 述 浏览 器 卡 牌 游戏 的 创建 ， 其 结构 如 同一 棵 树 ， 
可 以 相互 通信 和 且 可 复 用 的 组 件 组 成 。 该 游戏 还 拥有 动画 和 动态 的 SVG 图 形 。 
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第 4 章 ， 高 级 项 目 配置 。 这 一 章 关注 如 何 使 用 官方 提供 的 Vue 命令 行 工具 (CLI), 根据 CLI 
的 向 导 使 用 Webpack、Babel 以 及 更 多 构建 工具 来 构建 一 个 完整 的 项 目 。 同 时 还 介绍 了 单 文件 组 
件 的 格式 ， 让 开发 者 能 够 创建 组 件 作为 构建 块 。 


第 5 章 , 项 目 3: 支持 中 心 。 这 一 章 介 绍 如 何 利用 官方 路 由 库 来 组 织 一 个 多 页 面 应 用 ,涉及 
髓 套路 由 、 动 态 参 数 和 导航 守卫 等 。 此 项 目 还 拥有 自 定义 用 户 登 录 系统 。 

第 6 章 , 项 目 4: 博客 地 图 。 这 一 章 带 你 创建 一 个 利用 Google OAuth 登录 和 Google Maps API 
的 应 用 。 还 介绍 了 利用 官方 提供 的 VueX 库 进 行 状态 管理 ， 以 及 快速 功能 组 件 等 重要 内 容 。 


























第 7 章 ， 项目 5: 在 线 商店 以 及 扩展 。 这 一 章 概 述 一 些 高 级 开发 技术 。 例 如 ， 使 用 ESLint 做 
代码 质量 检查 , 使 用 Jest 对 Vue 组 件 进行 单元 测试 , 将 应 用 翻译 为 多 语言 ， 以 及 使 用 服务 端 渔 染 
技术 提高 速度 和 解决 搜索 引擎 优化 (SEO ) 的 问题 。 


第 8 章 , 项 目 6: 使 用 Meteor 开发 实时 仪表 盘 。 这 一 章 教 你 如 何在 Meteor 应 用 中 使 用 Vue， 
以 利用 这 个 全 栈 框架 的 实时 处 理 功能 。 








本 书 需要 的 工具 


学 习 本 书 的 过 程 中 ， 你 只 需要 一 个 文本 编辑 器 或 代码 编辑 器 (推荐 使 用 Visual Studio Code 
和 Atom )， 以 及 一 个 Web 浏览 器 〈 建 议 优先 选择 最 新 版 的 Firefox 或 Chrome 浏览 絮 作 为 开发 工 
具 )。 
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目标 读者 


如 果 你 是 一 名 Web 开发 者 ， 想 利用 Vue.js 来 构建 功能 丰富 、 交 互 性 强 的 专业 应 用 ， 那 么 本 
书 正 适合 你 。 在 阅读 本 书 时 ， 你 应 该 已 经 掌握 了 JavaScript 语言 。 如 果 熟 悉 HTML、Node.js,， 以 
及 类 似 npm 和 Webpack 这 样 的 工具 ， 那 么 对 于 阅读 本 书 将 很 有 帮助 ， 但 这 不 是 必需 的 。 
































排版 约定 
为 了 区 分 不 同类 型 的 信息 , 本 书 定义 了 一 些 文本 样式 。 下 面 是 一 些 样式 的 示例 以 及 相关 说 明 。 
正文 中 的 代码 采用 以 下 样式 :“ 可 以 通过 使 用 a3. select 函数 选择 HTML 元 素 。” 
代码 块 的 样式 如 下 所 示 : 








class Animal 


{ 


V1 和 





public: 

virtual void Speak(void) const // 基 类 中 的 关键 字 virtual 
// 使 用 Mach 5 控制 台 输 出 
M5DEBUG_PRINT("...\n") 

} 

新 的 术语 和 重要 的 词语 将 以 黑体 形式 显示 。 在 屏幕 上 ( 如 菜单 或 对 话 框 中 ) 出 现 的 文字 按照 


如 下 样式 显示 :“ 单 击 按钮 Next 将 打开 下 一 个 界面 。 


人 此 图 标 表示 警告 或 重要 提示 。 


人 此 图 标 表示 提示 或 小 技巧 。 


读者 反馈 
和 读者 随时 进行 反馈 ,告诉 我 们 你 对 本 书 的 想法 一 一 喜欢 或 者 不 喜欢 都 可 以 。 读 者 反馈 对 








我 们 来 说 非常 有 用 。 
一 般 的 反馈 可 以 发 送 到 电子 邮箱 feedback@packtpub.com， 请 在 邮件 标题 中 提 及 书 名 。 


你 精通 某 一 领域 , 并 有 意向 参与 相关 图 书 的 编写 , 请 查看 我 们 的 作者 指南 : www.packtpub. 








加 细 
com/authors。 
客户 支持 

现在 你 已 经 是 Packt 图 书 (本 书 ) 的 拥有 者 了 ， 我 们 为 你 提供 了 许多 物 超 所 值 的 内 容 。 


让 

















道 购 买 ， 可 以 打开 网 址 http://www.packtpub.com/support， 注 册 之 后 ,我 们 会 将 文件 通过 


直接 发 送 给 你 。 
可 以 按照 如 下 步骤 下 载 代码 文件 。 

(1) 使 用 你 的 电子 邮箱 地 址 和 密码 登录 或 注册 我 们 的 网 站 。 
(2) 将 鼠标 移 到 网 页 顶部 的 SUPPORT 选项 卡 上 。 





巨 





下 


下 载 示例 代码 
用 你 的 账号 登录 http://www.packtpub.com， 可 以 下 载 本 书 的 示例 代码 文件 。 如 果 是 从 其 他 
电子 邮件 


前 言 Vii 





(3) 点 击 Code Downloads & Errata。 
(4) 在 Search 框 中 输入 书 名 。 

(5) 选择 要 下 载 代码 文件 的 图 书 。 

(6) 在 下 拉 菜 单 中 选择 购买 渠道 。 

(7) 点 击 Code Download。 


还 可 以 在 Packt Publishing 网 站 的 图 书 详情 页 面 点 击 Code Files 按钮 进行 下 载 。 可 以 在 Search 
框 中 输入 书 名 找到 图 书 详情 页 面 。 注 意 ,需要 用 Packt 账号 登录 。 

下 载 代码 文件 之 后 ， 利 用 最 新 版 的 解压 缩 软 件 进行 解压 或 提取 : 
口 Windows 用 户 使 用 WinRAR/7-Zip 


口 Mac 用 户 使 用 Zipeg/iZip/UnRarX 
口 Linux 用 户 使 用 7-Zip/PeaZip 
































本 书 的 代码 也 可 以 在 GitHub ( https://github.com/PacktPublishing/Vue-js-2-Web-Development- 
Projects ) 上 找到 。 我 们 出 版 的 其 他 图 书 的 相关 代码 和 视频 可 以 在 https://github.com/PacktPublishing/ 
获取 。 


下 载 本 书 的 彩色 图 片 


本 书 中 使 用 的 彩色 截图 和 图 表 以 PDF 文件 的 形式 提供 下 载 。 彩 色 图 片 有 助 于 读者 更 好 地 理解 
控制 台 输 出 的 变化 。 可 以 在 这 里 下 载 该 文件 : https:/www.packtpub.comysites/defaultyfiles/downloads/ 
Vuejs2WebDevelopmentProjects_ColorImages.pdf。 








勘误 


虽然 我 们 已 经 想 尽 办 法 确保 内 容 的 准确 性 , 但 错误 在 所 难免 。 如 果 你 发 现 我 们 出 版 的 图 书 有 
错误 (不论 是 文本 还 是 代码 的 错误 )， 请 告诉 我 们 ， 我 们 将 不 胜 感激 。 这 样 你 不 仅 可 以 让 别人 知 
晓 错误 ,减少 疑 感 ， 还 有 助 于 我 们 对 本 书后 续 版 本 的 改进 。 如 果 你 发 现 了 任何 错误 ， 请 访问 
http:/www.packtpub.com/submit-errata 告知 我 们 。" 通 过 点 击 Errata Submission Form 链接 选择 图 
书 , 然后 输入 勘误 详情 。 一旦 你 的 勘误 得 到 验证 , 我们 将 接受 此 勘误 并 上 传 到 我 们 的 网 站 上 或 添 
加 到 已 有 勘误 表 的 相应 位 置 。 


要 查看 之 前 提交 的 勘误 ， 可 以 打开 https:/www.packtpub.com/books/content/support， 然 后 在 
搜索 框 里 输入 书 名 ， 相 关 信息 将 会 出 现在 Errata 部 分 。 






























































GD 针对 本 书 中 文 版 的 勘误 ， 请 到 http://www.ituring.com.cn/book/2575 查看 和 提交 。 一 一 编者 注 


tk 





viii 前 


反 盗 版 

在 互联 网 上 ， 针 对 受 版 权 保护 材料 的 盗版 行为 是 所 有 媒体 都 面临 的 持续 性 问题 。Packt 非常 
重视 版 权 和 许可 的 保护 。 如 果 你 在 互联 网 上 发 现 关 于 我 们 图 书 任何 形式 的 非法 复制 品 , 请 及 时 向 
我 们 提供 位 置地 址 和 网 站 名 称 ， 以 便 我 们 处 理 盗版 行为 。 
电子 邮箱 copyright@packtpub.com 联系 我 们 ， 并 将 可 疑 的 盗版 材料 链接 附 在 邮件 中 。 























请 通过 
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Vue 开发 入 门 














Vue 是 一 个 专注 于 构建 Web 用 户 界面 的 JavaScript 库 。 本 章 首先 通过 一 段 简单 的 介绍 让 你 对 
Vue 有 一 个 初步 的 认识 ， 然 后 创建 一 个 Web 应 用 ， 为 本 书后 续 创建 的 不 同 项 目 葛 定 基础 。 











1.1 为 什么 需要 另外 一 个 前 端 框 架 


相对 来 说 , Vue 在 JavaScript 前 端 领域 属于 后 来 者 , 但 是 对 于 当前 主流 JavaScript 库 的 地 位 具 
有 很 大 的 威胁 。 它 易 用 、 灵 活 、 速 度 快 ,还 提供 了 许多 功能 和 可 选 工具 ， 这 使 得 开发 者 能 够 快速 
地 构建 一 个 现代 Web 应 用 。Vue 的 作者 尤 南 溪 将 其 称 为 渐进 式 框架 。 


口 Vue 遵循 渐进 增 量 的 设计 原则 , 其 核心 库 专注 于 用 户 界 面 , 使 得 现 有 的 项 目 可 以 方便 地 集 
成 使 用 Vue。 

口 Vue 既 可 以 构建 出 很 小 的 原型 ， 又 可 以 构建 出 复杂 的 大 型 Web 应 用 。 

口 Vue 非常 容易 上 手 一 一 初学 者 能 轻松 掌握 Vue, 而 已 经 熟悉 Vue 的 开发 者 则 可 以 在 实际 项 
目 中 快速 发 挥 出 它 的 作用 。 


Vue 整体 上 遵循 MVVM (Model-View-ViewModel， 模 型 - 视图 -视图 模型 ) 架构 ， 也 就 是 
说 View( 用 户 界 面 或 视图 ) 和 Model (数据 ) 是 独立 的 ，ViewModel (Vue ) 是 View 和 Model 
交互 的 桥梁 。Vue 对 View 和 Model 之 间 的 更 新 操作 做 了 自动 化 处 理 ， 并 且 已 经 为 开发 者 进行 了 
优化 。 因 此 ， 当 View 的 某 个 部 分 需要 更 新 时 ， 开 发 者 并 不 需要 特别 指定 ，Vue 会 选择 恰当 的 方 
法 和 时 机 进行 更 新 。 


Vue 还 吸取 了 其 他 类 似 框架 (如 React、Angular 和 Polymer ) 的 精华 。 下 面 是 对 Vue 核心 功 
人 已 、 
能 的 概述 。 


口 一 个 响应 式 的 数据 系统 , 能 通过 轻 量 级 的 虚拟 DOM 引擎 和 最 少 的 优化 工作 来 自动 更 新 用 
户 界 面 。 

口 灵活 的 视图 声明 , 包括 优雅 友好 的 HTML 模板 、JSX( 在 JavaScript 中 编写 HTML 的 技术 ) 
以 及 hyperscript 泻 染 函数 (完全 使 用 JavaScript )。 

口 由 可 维护 、 可 复 用 组 件 构 成 的 组 件 化 用 户 界面 。 
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口 官方 的 组 件 库 提供 了 路 由 、 状 态 管理 、 脚 手 架 以 及 更 多 高 级 功能 ,使 Vue 成 为 了 一 个 灵 
活 且 功能 完善 的 前 端 框架 。 











1.1.1 一 个 有 发 展 前 景 的 项 目 


2013 年 ， 尤 雨 溪 开 始 筹划 构建 Vue 的 第 一 版 原型 。 那 时 候 尤 雨 溪 任 职 于 Google， 并 在 工作 
中 使 用 Angular。 尤 雨 溪 最 初 的 目标 是 吸取 Angular 中 所 有 优秀 的 功能 ， 比 如 数据 绑 定 和 数据 驱 
动 DOM， 并 据 弃 会 导致 框架 死板 、 难 以 学 习 和 使 用 的 一 些 功 能 。 


Vue 于 2014 年 2 月 首次 公开 亮相 ， 并 在 第 一 天 就 大 获 成 功 : 出 现在 HackerNews 首页 ， 在 
Reddit 的 /wjavascript 板块 中 位 居 榜 首 ， 并 且 其 官网 获得 了 1 万 次 独立 访问 。 


Vue 的 第 一 个 主要 版 本 1.0 于 2015 年 10 月 发 布 。 截至 2015 年 年 底 ，Vue 在 npm 中 的 下 载 量 
诡 升 至 38.2 万 次 , 在 GitHub 上 收获 了 1.1 万 个 star， 其 官网 获得 了 36.3 万 次 独立 访问 。 主 流 的 
PHP 框架 Laravel 选用 Vue 蔡 代 React 作为 其 官方 的 前 端 库 。 


Vue 的 第 二 个 主要 版 本 2.0 于 2016 年 9 月 发 布 ， 具 有 基于 虚拟 DOM 的 全 新 泻 染 器 以 及 许多 
新 特性 ， 比 如 服务 端 泻 染 和 性 能 提升 等 。 本 书 就 是 基于 2.0 编写 的 。Vue 是 目前 速度 最 快 的 前 端 
框架 之 一 ,根据 与 React 团队 共同 得 出 的 对 比 报告 ,Vue 的 性 能 甚至 优 于 React( https://cn.vuejs.org/ 
v2/guide/comparison )。 写 作 本 书 时 ，Vue 是 GitHub 上 第 二 流行 的 前 端 框 架 ， 有 7.2 万 个 star， 位 
于 React 之 后 、Angular 之 前 "。 


在 其 路 线 图 中 , Vue 的 下 一 个 主要 版 本 会 集成 更 多 的 Vue 原生 库 , 比如 Weex 和 NativeScript， 
以 便 使 用 Vue 来 构建 原生 移动 应 用 ， 同 时 还 会 添加 新 的 特性 和 优化 。 


如 今 ， 有 许多 公司 都 在 使 用 Vue， 比 如 微软 、Adobe、 阿 里 巴巴 、 百 度 、 小 米 、Expedia、 任 
天 堂 和 GitLab。 

























































































1.1.2 ”兼容 性 要 求 


Vue 没有 任何 第 三 方 依 赖 ， 可 以 在 所 有 兼容 ECMAScript 5 的 浏览 器 中 使 用 。 这 也 就 是 说 它 
不 支持 Internet Explorer 8 及 以 下 版 本 ， 因 为 Vue 使 用 了 JavaScript 中 相对 较 新 的 特性 ， 比 如 
Object .defineProperty， 而 它们 在 老 版 本 的 浏览 器 中 是 无 法 polyfill 的 。 

在 本 书 中 ,编写 代码 使 用 的 JavaScript 版 本 为 ES2015 ( 以 前 称 为 ES6 )， 所 以 在 学 习 前 几 章 
时 ,需要 一 个 较 新 的 浏览 器 ( 比如 Edge、Firefox 或 Chrome ) 来 运行 示例 代码 。 本 书后 续 章节 将 
介绍 编译 器 Babel， 它 编译 过 的 代码 可 以 很 好 地 运行 在 老 版 本 浏览 器 中 。 










































































Q@ 中 文 版 出 版 时 ，Vue 已 超越 React， 位 居 第 一 ， 参见 : https://github.com/collections/front-end-javascript-frameworks。 
编者 注 
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1.2 一 分 钟 设置 


事 不 宜 迟 ,下 面 我 们 通过 快速 设置 来 创建 第 一 个 Vue 应 用 。 由 于 Vue 与 生 俱 来 的 灵活 性 , 只 
需要 一 个 简单 的 <script> 标 签 就 能 添加 到 任意 Web 页 面 中 。 下 面 创建 一 个 包含 Vue 库 的 简单 
Web 页 面 ， 其 中 有 一 个 简单 的 div 元 素 和 一 个 <script> 标 签 : 


<html> 
<head> 
<meta charset="utf-8"> 
<title>Vue Project Guide setup</title> 
</head> 
<body> 








<!-- 将 库 添 加 到 这 里 --> 


<script src="https://unpkg.com/vue/dist/vue.js"></script> 


<1-- 一 些 HTML 代码 --> 
<Hiv "Tas "root 

<p>Is this an Hello world?</p> 
</div> 


<1-- 一 些 JavaScript 代码 --> 

<script> 

console.log('Yes! We are using Vue version', Vue.version) 
</script> 


</body> 
</html> 


在 浏览 器 的 控制 台中 ， 可 以 看 到 类 似 如 下 的 内 容 : 
Yes! We are using Vue version 2.0.3 


正如 上 面 的 代码 所 示 ， 库 对 外 提供 了 一 个 Vue 对 象 , 该 对 象 包含 使 用 Vue 所 需 的 所 有 功能 。 
至 此 , 一 切 就 绪 。 





1.3 创建 一 个 应 用 


现在 ， 这 个 Web 页 面 中 还 没有 运行 Vue 应 用 。 整 个 库 都 是 基于 Vue 实例 的 ， 而 实例 是 View 
和 Model (数据 ) 交互 的 桥梁 。 因 此 需要 创建 一 个 新 的 Vue 实例 来 启动 应 用 : 


// 创建 Vue 实例 
Var app = new Vuel({ 
// 根 DOM 元 素 的 CSS 选择 器 
el: '#root', 
// 一 些 数据 
data () { 
return { 
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message: 'Hello Vue.js!', 
} 
ys 
前 


在 上 面 的 代码 中 , 使 用 关键 字 new 调用 Vue 构造 器 创建 了 一 个 新 的 实例 。Vue 构造 器 有 一 个 
参数 一 一 option 对 象 。 该 参数 可 以 携带 多 个 属性 ( 称 为 选项 ), 我 们 会 在 后 面 的 章节 中 逐渐 学 习 。 
这 里 只 使 用 其 中 的 两 个 属性 。 


通过 el 选项 ,我 们 使 用 CSS 选择 器 告知 Vue 将 实例 添加 ( 挂 载 ) 到 Web 页 面 的 哪个 DOM 
元 素 中 。 在 这 个 示例 中 ，Vue 实例 将 使 用 <aiv i9="root">DOM 元 素 作为 其 根 元 素 。 另 外 ,也 
可 以 使 用 Vue 实例 的 smount 方法 替代 el 选项 : 


Var app = new Vuelt{ 
data () { 
return { 
message: 'Hello Vue.js!', 
} 
Fx 
}) 
// 添加 Vue 实例 到 页 面 中 
app. $mount ('#root') 


























&D Vue 实例 的 大 多 数 特殊 方法 和 属性 都 是 以 美元 符号 ($) 开头 的 。 











我 们 还 会 在 aata 选项 中 初始 化 一 些 数据 ， 利 用 了 携带 一 个 字符 串 的 message 属性 。 现 在 
Vue 应 用 运行 起 来 了 ， 但 是 此 处 还 并 没有 做 什么 。 


h 








在 单个 Web 页 面 中 ， 开 发 者 可 以 添加 任意 多 个 Vue 应 用 。 只 需要 为 每 个 应 用 创 
建 出 新 的 Vue 实例 并 挂 载 到 不 同 的 DOM 元 素 即 可 。 当 想 要 将 Vue 集成 到 已 有 的 
项 目 中 时 ， 这 非常 方便 。 


Vue 开发 者 工具 


Vue 有 一 个 官方 调试 工具 ， 在 Chrome 中 以 扩展 的 方式 呈现 ， 名 为 Vue.js devtools。 通 过 该 
工具 可 以 看 到 应 用 的 运行 情况 ， 这 有 助 于 调试 代码 。 可 以 在 Chrome 网 上 应 用 商店 
( https://chrome.google.com/webstore/search/vue ) 下 载 ; 如 果 使 用 Firefox， 则 可 以 到 Firefox 附加 
组 件 ( https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss ) 下 载 。 


使 用 Chrome 版 本 的 话 ， 还 需要 进行 额外 的 设置 。 在 扩展 设置 中 ， 启 用 Allow access to file 
URLs 选项 ， 这 样 调试 工具 就 能 在 从 本 地 磁盘 打开 的 Web 页 面 上 检测 Vue 了 。 
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Vv Vuejs devtools ”220 Enabled 名 
Chrome devtools extension for debugging VueJs applications. 


Details 














Allow in incognito 网 Allow accessto file URLs 











打开 我 们 的 Web 页 面 , 按 快 提 
开发 者 工具 





E 键 F12( 在 OS X 中 快捷 键 是 Shift + command + c ) 打 开 Chrome 
- 具 ， 然 后 找到 Vue 选项 卡 (有 可 能 隐藏 在 More tools... 下 拉 菜 单 中 )。 打 开 该 选项 卡 之 


后 , 就 可 以 看 到 一 棵 默认 名 为 Root 的 Vue 实例 树 。 如 果 点 击 Root 的 话 , 会 在 侧 边 栏 上 显示 出 实 
例 的 相关 属性 。 








[x | Elements Console Vue 
Vv Instance selected: Root 


Q Filter components 


Sources Network Timeline 





Profiles Application » -J 


Components {9 Vuex {77 Refresh 


Root © Inspect DOM 


message: "Hello Vue.js!" 











可 以 将 devtools 选项 卡 拖 放 到 喜欢 的 位 置 。 建 议 将 其 放 在 靠 前 的 位 置 ， 因 为 当 
Vue 不 处 于 开发 模式 或 没有 运行 时 ， 该 选项 卡 在 页 面 中 是 隐藏 起 来 的 。 














可 以 通过 name 选项 修改 Vue 实例 的 名 字 : 


var app = new Vuel(t{ 
name: 'MyApp', 
ye 

}) 


当 一 个 页 面 中 有 多 个 Vue 实例 时 ， 这 有 助 于 直观 地 在 开发 者 工具 中 找到 具体 的 某 个 实例 。 
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[x | Elements Console Vue Sources Network Timeline Profiles Application » [全 
也 nstance selected: MyApp Components < Vuex {£7 Refresh 
App sm 
EE MyApp © Inspect DOM 


message: "Hello Vue.js!" 











1.4 借助 模板 实现 DOM 的 动态 性 





在 Vue 中 ,开发 者 可 采用 多 种 方式 编写 View。 现 在 ， 我 们 先 从 模板 开始 。 模 板 是 描述 View 
最 简单 的 方法 ,因为 它 看 起 来 很 像 HTML, 并 且 只 需要 少量 额外 的 语法 就 能 轻松 实现 DOM 的 动 





1.4.1 文本 显示 


先 来 看 看 模板 的 第 一 个 功能 : 











文本 插值 。 文 本 插值 用 于 在 Web 页 面 中 显示 动态 的 文本 。 文 
本 插值 的 语法 是 在 双 花 括号 内 包含 单个 任意 类 型 的 JavaScript 表达 式 。 当 Vue 处 理 模板 时 ， 该 


JavaScript 表达 式 的 结果 将 会 奉 换 掉 双 花 括号 标签 。 用 下 面 的 代码 奉 换 掉 <aqiv id="root "> 元 素 : 


<div id="root"> 





<p>{{ message }}</p> 
</div> 








在 上 面 的 模板 中 ， 有 一 个 <p> 元 素 。 该 元 素 的 内 容 是 JavaScript 表达 式 message 的 结果 。 该 
表达 式 将 返回 Vue 实例 中 message 属 牧 
































的 值 。 现 在 应 该 可 以 在 Web 页 面 中 看 到 输出 了 一 行 新 的 
文本 内 容 : Hello vue.js!。 这 看 起 来 只 是 显示 了 
多 事情 一 DOM 和 数据 连通 了 。 

















个 字符 串 ， 但 是 Vue 已 经 为 开发 者 做 了 很 





为 了 证 明 这 一 点 ， 我 们 打开 浏览 器 控制 台 并 修改 app .message 的 值 ， 然 后 按 回 车 键 : 
app.message = 'Awesome!' 





可 以 发 现 显示 的 文本 发 生 了 改变 。 这 背后 的 技术 称 为 数据 绑 定 。 也 就 是 说 每 当 数据 有 改变 时 ， 
Vue 都 能 够 自动 更 新 DOM， 不 需要 开发 者 做 任何 事情 。Vue 框架 中 包含 一 个 非常 强大 且 高 效 的 
响应 式 系统 ， 能 对 所 有 的 数据 进行 跟踪 ， 并 且 能 在 数据 发 生 改 变 时 按 需 自动 更 新 View。 所 有 这 
些 操作 都 非常 快 。 
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1.4.2 利用 指令 添加 基本 的 交互 


接 下 来 在 我 们 的 静态 应 用 中 加 入 交互 性 吧 。 例 如 , 允许 用 户 通过 输入 文本 修改 页 面 中 显示 的 


内 容 。 要 达到 这 样 的 交互 效果 ， 可 以 在 模板 中 使 用 称 为 指令 


Vue 中 所 有 的 指令 名 都 是 带 v- 前 名 


令 的 特殊 HTML 属性 。 





组 的 ,并 遵循 短 横 线 分 隔 式 (kebab-case ) 语法 。 


这 意味 着 要 用 短 横 线 将 单词 分 开 。HTML 属性 是 不 区 分 大 小 写 的 (大 写 或 小 写 都 


没有 任何 问题 )。 





在 此 , 需要 使 用 的 指令 是 v-model, 它 将 <input> 元 素 的 值 与 message 数据 属性 进 


新 的 <input> 元 素 ， 该 元 素 带 有 v-model="message" 属 性 : 


在 模板 里 面 添加 一 个 








<div :id="ro0t"> 
<p>{{ message }}</p> 
<!-- 添加 一 个 文本 输入 框 --> 
<input v-model="message" 
</div> 


当 input 值 发 生 改 变 时 ,Vue 会 


/> 

















了 绑 定 。 








自动 更 新 message 属性 ,你 可 以 在 input 中 输入 一 些 内 容 ， 


验证 文本 内 容 是 否 会 随 着 输入 的 变化 而 变化 ， 以 及 开发 者 工具 中 值 的 变化 : 


Vue ls awesomel 





Vue is awesomel 











民 癌 











Elements Console Vue Sources Network Timeline Profiles Application » x 
Vv Instance selected: MyApp Components {9 Vuex {£7 Refresh 
Q Fitter com 


MyApp 


meEssage: 


"Vue is awesome!" 


© Inspect DOM 








Vue 提供 了 许多 指令 ， 开 发 者 还 可 以 自 定义 指令 。 不 用 担心 ， 


后 续 章 节 会 进行 介绍 。 
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1.5 ”小结 


本 章 首先 快速 设置 了 一 个 Web 页 面 来 着 手 使 用 Vue, 然后 编写 了 一 个 示例 应 用 。 我 们 在 页 面 
中 创建 并 挂 载 了 一 个 Vue 实例 到 DOM 中 , 接着 编写 模板 实现 了 DOM 的 动态 性 。 在 这 个 模板 中 ， 
我 们 借助 文本 插值 用 一 个 JavaScript 表达 式 来 显示 文本 内 容 。 最 后 , 通过 v-model 指令 将 input 
元 素 绑 定 到 数据 属性 ， 给 Web 页 面 添 加 了 一 些 交 互 。 






































在 下 一 章 中 , 我 们 会 使 用 Vue 创建 第 一 个 真正 的 Web 应 用 Markdown 笔记 本 。 我 们 将 用 
到 Vue 提供 的 更 多 优秀 功能 ， 使 得 该 应 用 的 开发 成 为 一 次 快速 而 有 趣 的 体验 。 











项 目 1: Markdown 笔记 本 


























我 们 将 创建 的 第 一 个 应 用 是 一 个 Markdown 笔记 本 ,过 程 中 会 逐步 展开 介绍 Vue 的 几 个 功能 。 
我 们 会 在 第 1 章 的 基础 之 上 添加 更 多 的 元 素 , 例如 用 于 用 户 交 互 的 指令 和 事件 , 更 多 的 Vue 实例 
选项 ， 以 及 对 值 做 处 理 的 过 滤器 。 


在 开始 编写 代码 之 前 ， 先 介绍 一 下 即将 开发 的 应 用 ， 并 明确 要 达成 的 目标 : 


口 该 笔记 本 应 用 允许 用 户 以 Markdown 标记 语言 来 写 笔 记 ; 
口 支持 Markdown 的 实时 预览 ; 

口 用 户 可 以 添加 任意 多 条 笔记 ; 

口 笔记 可 以 在 用 户 下 次 打开 应 用 时 重新 加 载 出 来 。 


为 此 ， 我 们 将 用 户 界面 分 为 三 部 分 : 


口 笔记 编辑 器 作为 主要 内 容 呈 现在 中 间 ; 
口 右 侧 面板 用 来 实时 预览 当前 的 Markdown 笔记 ; 
口 左 侧面 板 上 有 笔记 列表 和 一 个 添加 笔记 的 按钮 。 


本 章 学 习 绪 束 时 ， 应 用 的 效果 看 起 来 如 下 所 示 。 
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Guillaume CHAU 


口 Notebook x 
€ CG © file///D:/Mes%20documents/GitHub/packt-vue-project-guide/chapter2-full/index.html 
十 Add note Test note 四 Hi! This notebook is using markdow 
**Hil** This notebook is using [markdown] 
On Vuejs 


(https://github.com/adam-p/markdown- 
here/wiki/Markdown-Cheatsheet) for formatting! 


Things lneedtoleam 廊 
Friends birthdays 
Cookie recipes 


What does 42 mean 
anyway? 





27/12/16, 00:11 1 8 123 


n for formatting! 


a 


廊 


x 





2.1 一 个 基本 的 笔记 编辑 器 


现在 我 们 将 从 一 个 非常 简单 的 Markdown 笔记 本 应 用 入 手 : 只 在 左 侧 显 示 一 个 文本 编辑 带 ， 
在 右 侧 显示 Markdown 实时 预览 。 然 后 ， 青 将 应 用 扩展 为 支持 多 条 笔记 的 完 





2.1.1 项 目 设 置 
对 于 此 项 目 ， 我 们 需要 准备 几 个 文件 用 于 起 步 。 


(1) 首先 下 载 本 章 的 源 代码 文件 ， 解 压 到 一 个 文件 夹 后 打开 chapter2-simple 。 打 开 文 件 
index.html , 添加 一 个 div 元 素 , 其 id 为 notebook。 然 后 添加 一 个 section, 其 class 为 main。 





至 此 ，index.html 文件 看 起 来 是 这 样 的 : 


<html> 
<head> 
<title>Notebook</title> 
<!-- 图 标 和 样式 表 --> 
<link href="https://fonts.googleapis.com/icon? 
family=Material+Icons" rel="stylesheet"> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
<!-- 在 页 面 中 包含 JavaScript 库 --> 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 





<!-- 笔记 本 应 用 --> 


整 笔记 本 。 
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<div id="notebook"> 


<!-- 主 面板 --> 
<section class="main"> 


</section> 





</div> 
<1-- 一 些 JavaScript 代码 --> 
8GLIDE SPCS"oCrLLBC: TetS 
</body> 
</html> 


(2) 现在 打开 scriptjs 文件 并 添加 一 些 JavaScript 代 码 。 如 同 第 1 章 中 一 样 ， 创 建 一 个 Vue 实 
例 ， 并 利用 Vue 构造 函数 将 实例 挂 和 载 到 #notebook 元 素 上 。 


// 新 建 一 个 VueJS 实例 

new Vuel({ 
// 根 DOM 元 素 的 CSS 选择 器 
el: '#notebook', 

} 


(3) 然后 ， 添 加 一 个 名 为 content 的 数据 属性 ， 用 于 保存 笔记 内 容 。 


new Vue ({ 
el: '#notebook', 








// 一 些 数据 
data () { 
return { 
ontents, "Thig Ls. a 三 De 
} 
lj 
} 


至 此 ， 你 已 经 可 以 创建 第 一 个 实际 的 Vue 应 用 了 。 


2.1.2 ”笔记 编辑 器 


应 用 现在 可 以 运行 了 ， 接 下 来 添加 一 个 文本 编辑 兢 。 我 们 使 用 一 个 简单 的 textarea 元 素 ， 
以 及 第 1 章 介 绍 的 v-model 指令 。 


在 index.html 中 创建 一 个 section 元 素 ， 在 里 面 添加 textarea， 然 后 在 textarea 中 添 
加 一 个 v-model 指令 ， 并 绑 定 到 content 属性 上 : 


<!-- 主 面板 --> 
<section class="main"> 

<textarea v-model="content"></textarea> 
</section> 
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现在 ， 如 果 在 笔记 编辑 器 里 面 修改 文字 ， 可 以 在 Chrome 的 开发 者 工具 中 看 到 content 的 
值 会 自动 改变 。 


Vv-model 指令 不 限于 文本 输入 使 用 。 它 同样 可 以 用 于 其 他 元 素 , 例如 匀 选 框 、 单 
选 按 钮 ， 其 至 自 定义 组 件 。 本 书 的 后 面 有 相关 介绍 


921 -Po 


2.1.3 ”预览 面板 








为 了 将 以 Markdown 编写 的 笔记 转换 为 有 效 的 HTML， 这 里 使 用 了 一 个 名 为 Marked 的 第 三 
方 库 。 




















(1) 在 页 面 中 ,将 Marked 添加 到 引用 Vue 的 <script> 标 签 之 后 : 
<1!-- 在 页 面 中 包含 库 --> 


<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<!-- 添加 Marked 库 : --> 
<script src="https://unpkg.com/marked"></script> 





Marked 使 用 起 来 非常 简单 ， 调 用 它 的 时 候 传人 Markdown 文本 内 容 ， 它 将 会 返回 相应 的 
HIML。 








(2) 用 一 些 Markdown 文本 内 容 进行 尝试 : 


const html = marked('**Bold** *Italic* [link] (http://vuejs.org/)') 
console.1log (html) 


在 浏览 需 的 控制 台 可 以 看 到 如 下 输出 : 


<p><strong>Bold</strong> <em>Italic</em> 
<a href="http://vuejs.org/">link</a></p> 


1. 计算 属性 























计算 属性 是 Vue 提供 的 一 个 强大 功能 。 通过 它 可 以 定义 一 个 新 的 属性 , 而 该 属性 可 以 结合 任 
意 多 个 属性 ,并 做 相关 转换 操作 , 例如 将 一 个 Markdown 字符 串 转 换 为 HTML 一 一 这 也 是 为 什么 
要 使 用 一 个 函数 来 定义 它 的 值 。 计 算 属 性 具有 下 面 几 个 特征 : 


























口 计算 属性 的 值 基于 它 的 依赖 进行 缓存 ， 因 此 如 果 没 有 必要 是 不 会 重新 运行 函数 的 ， 从 而 
有 效 防止 无 用 的 计算 ; 

口 当 函 数 中 用 到 的 某 个 属性 发 生 了 改变 ,计算 属性 的 值 会 根据 需要 自动 更 新 ; 

口 计算 属性 可 以 如 其 他 普通 属性 一 样 使 用 ( 可 以 在 其 他 的 计算 属性 中 使 用 计算 属性 ); 
口 计算 属性 只 有 真正 用 于 应 用 中 时 ， 才 会 进行 计算 操作 。 





















































计算 属性 可 以 帮助 我 们 将 Markdown 格式 的 笔记 自动 转换 为 有 效 的 HTML, 这 样 就 可 以 实现 
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笔记 的 实时 预览 。 只 需要 在 computed 选项 中 声明 我 们 的 计算 属性 即 可 : 


// 计算 属性 
computed: { 
notePreview () { 
// Markdown 泻 染 为 HTML 
return marked (this.content) 
} 
} 


2. 文本 插值 转 义 
现在 使 用 文本 插值 将 笔记 显示 到 一 个 新 面板 中 。 
(1) 创建 一 个 class 为 preview 的 aside 元 素 ， 用 来 显示 计算 属性 notePrevievw 的 值 : 


<!-- 预览 面板 --> 

<aside class="preview"> 
{{ notePreview }} 

</aside> 


这 样 在 应 用 的 右 侧 就 有 一 个 用 来 显示 笔记 的 预览 面板 了 。 如 果 在 笔记 编辑 融 中 输入 一 些 文本 ， 
可 以 看 到 预览 面板 中 的 内 容 会 自动 更 新 。 但 是 ， 当 使 用 Markdown 格式 时 ， 应 用 会 有 一 个 问题 


(2) 利用 ** 将 文本 加 粗 ， 如 下 所 示 : 


下 -Ti i OL 


对 于 上 面 的 内 容 , 计算 属性 应 该 返回 有 效 的 HIML, 并 且 我 们 应 该 能 在 预览 面板 中 看 到 泻 染 
了 一 些 加 粗 的 文字 。 但 是 ， 实 际 看 到 的 内 容 是 这 样 的 : 


I'm in <strong>bold</strong>! 


可 以 看 到 文本 插值 自动 将 内 容 转 义 为 HTML 标签 了 。 这 样 可 以 防止 注入 攻击 ， 提 升 应 用 的 
安全 性 。 好 在 有 一 种 方法 可 以 显示 出 HTML 内 容 ， 我 们 稍 后 会 看 到 。 不 过 ， 这 迫使 你 思考 用 这 
种 方法 会 纳入 存在 潜在 威胁 的 动态 内 容 。 


例如 ,你 开发 了 一 个 评论 系统 , 任意 用 户 都 可 以 在 这 个 系统 中 写 一 些 文字 评论 。 如 果 有 人 在 
评论 中 写 了 一 些 HIML， 在 页 面 中 显示 出 有 效 的 HTML 内 容 ， 会 怎么 样 呢 ? 他 们 可 以 添加 一 些 
不 怀 好 意 的 JavaScript 代码 ， 这 样 所 有 访问 该 系统 的 用 户 都 会 受到 恶意 代码 的 攻击 。 这 类 攻击 称 
为 跨 站 脚本 攻击 (XSS 攻击 )。 这 就 是 为 什么 文本 插值 总 是 对 HTML 标签 做 转 义 处 理 。 





































































































在 应 用 内 ， 不 建议 使 用 v-html 指令 对 用 户 提供 的 内 容 做 HTML 插值 。 这 是 因 
人 为 用 户 可 能 会 在 <script> 标 签 中 编写 不 怀 好 意 的 、 会 被 执行 的 JavaScript 代码 。 
当然 ， 对 普通 文本 做 插值 是 安全 的 ， 因 为 HTML 不 会 被 执行 。 
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3. 显示 HTML 


现在 我 们 知道 文本 插值 出 于 安全 考虑 不 会 泻 染 HTML， 需要 使 用 男 外 一 种 方法 来 演 染 动态 
HTML: v-html 指令 。 就 像 我 们 在 第 1 章 里 看 到 的 v-model 指令 一 样 ，v-html 是 一 个 给 模板 
添加 新 功能 的 特殊 属性 。 它 能 够 在 应 用 中 泻 染 任意 有 效 的 HTML 字符 串 。 只 需要 把 字符 串 以 值 
的 方式 传人 即 可 ， 如 下 所 示 : 


<!-- 预览 面板 --> 


<aside class="preview" v-html="notePreview"> </aside> 
































现在 ， 对 Markdown 的 预览 功能 可 以 正常 使 用 了 ，HTML 内 容 也 能 够 动态 地 插入 页 面 中 。 





aside 元 素 中 的 任意 内 容 都 将 被 v-html 指令 的 值 替代 。 可 以 利用 这 一 点 来 放 
置 占 位 符 内 容 。 





应 该 看 到 的 运行 效果 如 下 所 示 。 


口 Notebook 





— GC |© file///D:/Mes%20documents/GitHub/packt-vue-project-guide/chapter2-simple/index.html 


人 六 来 
You can write in markdown You can write in markdown 











对 于 文本 插值 ，v-text 是 一 个 与 v-html 等 效 的 指令 。 它 的 行为 与 v-html 类 
似 ， 只 不 过 会 对 HTML 标签 做 转 义 处 理 ， 形 同 典 型 的 文本 插值 。 
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2.1.4 保存 笔记 


至 此 , 如 果 关 闭 或 者 刷新 应 用 , 录入 的 笔记 将 会 丢失 。 好 的 解决 办 法 是 将 笔记 内 容 保存 起 来 ， 
并 在 下 次 打开 应 用 时 加 载 。 为 了 达到 这 一 目的 ， 这 里 将 使 用 大 多 数 浏览 器 都 支持 的 API 
localStorage。 

1. 侦 听 改变 

我 们 希望 一 旦 笔记 内 容 发 生 了 改变 ， 就 对 其 做 保存 操作 。 因 此 这 里 利用 Vue 的 侦 听 器 
( watcher ) 功能 ， 当 content 数据 属性 发 生 改 变 时 触发 一 些 调 用 。 下 面 就 给 我 们 的 应 用 添加 一 
些 侦 听 器 ! 

(1) 添加 一 个 新 的 watcn 选项 到 Vue 实例 中 。 

watch 选项 是 一 个 字典 ， 把 被 侦 听 属性 的 名 字 作 为 键 , 把 侦 听 选项 对 象 作为 值 。 这 个 对 象 必 
须 有 一 个 nandler 属性 ,该 属性 可 以 是 一 个 函数 ， 也 可 以 是 一 个 方法 的 名 字 。 这 个 处 理 陶 数 将 
接收 两 个 参数 : 被 侦 听 属性 的 新 值 和 旧 值 。 

下 面 是 一 个 简单 的 处 理 函 数 示例 : 


new Vue ({ 


A Ss 


















































// 修改 侦 听 器 
watch: { 
// 侦 听 content 数据 属性 
content: { 
handler(val, oldVal) { 
console.log('new note:', val, 'old note:', oldVal) 
} 
} 
} 


现在 ， 当 在 笔记 编辑 器 中 输入 笔记 时 ， 可 以 在 浏览 需 的 控制 台 看 到 如 下 内 容 : 

new note: This is a **note**! old note: This is a **note** 

有 了 侦 听 器 ， 每 当 笔记 内 容 发 生变 化 时 ， 都 能 及 时 存储 笔记 。 

还 有 男 外 两 个 选项 可 以 和 hangdler 一 起 使 用 。 

口 deep 是 一 个 布尔 类 型 ,告诉 Vue 以 递归 的 方式 侦 听 般 套 对 和 象 内 部 值 的 变化 。 因 为 我 们 只 

侦 听 字符 串 ， 所 以 该 选项 在 此 处 没有 什么 作用 。 

口 immediate 也 是 一 个 布尔 类 型 ， 会 立即 触发 调用 处 理 函 数 ， 而 不 用 等 到 属性 值 第 一 次 变 
化 时 才 调 用 。 在 我 们 的 应 用 中 ， 这 也 没有 实际 的 意义 ,不 过 可 以 尝试 一 下 看 看 效果 。 
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6 这 两 个 选项 的 默认 值 都 是 false， 所 以 不 需要 使 用 的 时 候 ， 可 以 完全 忽略 它们 。 


(2) 给 侦 听 器 添加 ijmmediate 选项 : 


content: { 
handler(val, oldVal) { 
console.log('new note:', val, 'old note:', 
小 


immediate: true, 


oldVal) 


只 要 你 刷新 应 用 ， 就 可 以 在 浏览 器 控制 台 看 到 如 下 信息 : 

new note: This is a **note** old note: undefined 

可 以 看 到 旧 值 是 undaefineda， 这 其 实 并 不 奇怪 ， 因 为 侦 听 器 处 理 函 数 是 在 Vue 实例 刚刚 创 
建 的 时 候 首 次 调用 。 

(3) 实际 上 ， 我 们 在 这 里 根本 不 需要 这 个 选项 ， 把 它 删 除 掉 吧 : 









































content: { 
handler (val, oldVal) { 
console.log('new note:', val, 'old note:', 
Fs 
3} 


由 于 我 们 没有 使 用 任何 选项 ， 可 以 使 用 简写 语法 ， 忽 略 掉包 含 handler 选项 的 对 象 : 


oldVal) 


content (val, oldVal) { 
console.log('new note:', val, 'old note:', 


}, 


oldVal) 


6 当 不 需要 其 他 选项 (例如 deep 或 immediate ) 时 ,这 是 侦 听 器 中 最 常用 的 语法 。 





(4) 现在 使 用 1ocalstorage.setItem() API 来 保存 笔记 内 容 : 


content (val, oldVval) { 
console.log('new note:', val, 'old note:', 
localStorage.setItem('content', val) 


oldVal) 


和 

为 了 检查 上 面 的 代码 是 否 有 效 , 编辑 笔记 内 容 并 打开 浏览 右 的 开发 者 工具 。 在 Application 
或 Storage 选项 卡 〈 取决 于 使 用 的 浏览 器 ) 里 面 ， 应 该 可 以 在 Local Storage 下 找到 一 条 新 的 
内 容 。 
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2. 复 用 方法 


良好 的 编程 准则 之 一 就 是 : 不 要 重复 自己 (DRY )， 也 称 为 一 次 仅 且 一 次 (OAOO )。 开 发 者 
应 该 遵守 这 个 准则 。 因 此 可 以 把 一 些 逻 辑 写 在 可 复 用 的 函数 里 面 : methods。 下 面 我 们 就 把 保存 
笔记 的 逻辑 统一 在 一 个 地 方 。 


(1) 给 Vue 实例 添加 一 个 新 的 methods 选项 ， 并 在 这 里 使 用 localstorage API: 


new Vue ({ 


// 























methods: { 
saveNote(val) { 
console.log('saving note:', val) 
localStorage.setIitem('content', val) 


}, 
J 
} 
(2) 现在 可 以 在 侦 听 器 的 handler 选项 中 使 用 该 方法 名 了 : 
watch: { 


content: { 
handler: 'saveNote', 
由 
} 
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或 者 使 用 简写 语法 : 
watch: { 


contents: “SaveNote., 


i 
3. 访问 Vue 实例 
在 methogds 内 部 ， 可 以 通过 this 关键 字 访 问 Vue 实例 。 例 如 ,我 们 可 以 调用 另外 一 个 方法 : 


methods: { 
saveNote(val) { 
console.log('saving note:', val) 


localStorage.setIitem('content', val) 
this.reportOperation('saving') 
9 
reportOperation(opName) { 
console.log('The', opName, 'operation was completed!') 
} 
}, 


在 这 里 ， contentChanged 方法 会 调用 saveNote 方法 。 


通过 this 关键 字 , 还 可 以 访问 Vue 实例 的 其 他 属性 或 特殊 函数 。 下面 移 除了 saveNote 方 
法 的 参数 ， 直 接 访 问 content 数据 属性 : 














methods: { 
saveNote() { 
console.log('saving note:', this.content) 


localStorage.setItem('content', this.content) 
和 
9} 























在 侦 听 器 的 处 理 函 数 中 同样 可 以 直接 通过 this 访问 Vue 实例 的 属性 : 
watch: { 
content (val, oldVal) { 
console.log('new note:', val, 'old note:', oldVal) 
console.log('saving note:', this.content) 


localStorage.setItem('content', this.content) 
js 
7 


基本 上 可 以 在 任意 函数 ( 方法、 处 理 函 数 或 其 他 钩子 ) 中 使 用 this 关键 字 访 问 
Vue 实例 。 
2.1.5 “加 载 已 保存 的 笔记 


现在 笔记 内 容 每 次 改变 都 会 进行 保存 操作 , 我 们 需要 在 应 用 重新 打开 的 时 候 恢 复数 据 。 这 
将 使 用 localstorage.getItem() API。 将 下 面 的 代码 添加 到 JavaScript 文件 的 最 后 : 
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console.log('restored note:', localStorage.getIitem('content')) 
当 刷 新 应 用 时 ， 可 以 看 到 在 浏览 器 控制 台 打印 出 了 已 经 保存 的 笔记 内 容 。 
1. 生命 周期 钩子 


将 笔记 内 容 恢复 到 Vue 实例 中 的 第 一 种 方法 就 是 在 创建 实例 的 时 候 设 置 content 数据 属性 
的 内 容 。 


每 个 Vue 实例 都 严格 遵循 一 个 生命 周期 ， 包 括 多 个 环节 : 创建 ， 挂 载 到 页 面 ， 更 新 ， 最 终 被 
销毁 。 例 如 ， 在 创建 实例 阶段 ，Vue 会 将 实例 数据 变 成 响应 式 数据 。 











钩子 是 一 组 特殊 的 函数 , 会 在 某 个 时 间 点 被 自动 调用 。 这 就 允许 我 们 自 定义 框架 
的 逻辑 。 全 如， 可 以 在 创建 Vue 实例 时 调用 一 个 方法 。 


在 每 个 环节 之 中 或 之 前 ， 有 多 个 钩子 可 以 用 于 执行 逻辑 。 


口 peforeCreate: 在 Vue 实例 被 创建 时 (例如 使 用 new vue({}) )、 完 成 其 他 事项 之 前 
调用 。 

口 created: 在 实例 准备 就 绪 之 后 调用 。 注 意 ， 此 时 实例 还 没有 挂 载 到 DOM 中 。 

口 beforeMount: 在 挂 载 (添加 ) 实例 到 Web 页 面 之 前 调用 。 

口 mounted: 当 实 例 被 挂 载 到 页 面 并 且 DOM 可 见 时 调用 。 

口 peforeUpdate: 当 实例 需要 更 新 时 (一般 来 说 ， 是 当 某 个 数据 或 计算 属性 发 生 改变 时 ) 
调用 。 

口 updated: 在 把 数据 变化 应 用 到 模板 之 后 调用 。 注 意 此 时 DOM 可 能 还 没有 更 新 。 

D peforeDestroy: 在 实例 销毁 之 前 调用 。 

D gestroyed: 在 实例 完全 销毁 之 后 调用 。 


目前 ， 我 们 只 使 用 created 钩子 来 恢复 笔记 内 容 。 要 添加 一 个 生命 周期 钩子 ， 只 需要 将 相 
应 的 名 字 作 为 函数 添加 到 Vue 实例 选项 中 即 可 : 


new Vue ({ 


A Ses 















































// 当 实 例 准备 就 绪 会 调用 这 个 钩子 
created() { 
// 将 content 设置 为 存储 的 内 容 
// 如 果 没 有 保存 任何 内 容 则 设置 为 一 个 默认 字符 串 
this.content = localStorage.getItem('content ') || 'You can write in 
OWIY 尖 大 7 2 
}s; 
}) 


现在 刷新 应 用 ，created 钩子 会 在 实例 创建 时 被 自动 调用 。 这 将 把 content 数据 属性 设置 
为 恢复 出 来 的 数据 ;如果 表达 式 结果 为 假 值 (之 前 没有 保存 过 任何 内 容 )， 则 会 设置 为 ' You can 
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write in **markdown**', 


在 JavaScript 中 ， 如 果 值 为 false、0、 空 字符 囊 、null、undefined 或 NaN 
6 (不 是 一 个 数 ), 则 它 就 是 假 值 。 在 浏览 器 的 本 地 存储 数据 中 ， 如果 对 应 的 键 不 存 
在 ，localStorage.getItem() 方 法 会 返回 null。 


之 前 设置 过 的 侦 听 器 同样 会 被 调用 ,所 以 笔记 内 容 将 被 保存 。 在 浏览 器 控制 台 可 以 看 到 类 似 
如 下 内 容 : 


new note: You can write in **markdown** old note: This is a note 
saving note: You can write in **markdown** 
The saving operation was completed! 


可 以 看 出 , 当 created 钧 子 被 调用 时 ,Vue 已 经 设置 好 了 数据 属性 及 其 初始 值 ( 这 里 是 This 


ig a Hote)o 
2. 在 数据 中 直接 初始 化 
另外 一 种 方法 就 是 用 恢复 出 来 的 值 直 接 初始 化 content 数据 属性 : 


new Vue ({ 
WA" ad 
data() { 
return { 
content: localStorage.getItem('content') || 'You can write in 
**markdown**', 


} 












































A 
}) 


上 面 的 代码 并 不 会 触发 侦 听 器 处 理 函 数 的 调用 ， 因 为 这 里 是 初始 化 content 值 ， 而 不 是 改 
它 。 








ba 


2.2 ”多 条 笔记 


一 个 笔记 本 如 果 只 支持 一 条 笔记 是 没有 什么 意义 的 ,下面 就 让 它 支 持 记 录 多 条 笔记 。 我们 将 
在 界面 左 侧 添加 一 个 新 的 侧 边栏 来 呈现 笔记 列表 , 还 要 增加 一 些 额外 的 元 素 , 例如 用 于 重 命 名 笔 
记 的 文本 框 以 及 一 个 用 于 收藏 笔记 的 开关 按钮 。 











2.2.1 笔记 列表 
下 面 先 添加 一 些 基 础 性 的 内 容 ， 用 于 容纳 笔记 列表 。 
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(1) 在 主 面板 之 前 添加 一 个 新 的 aside 元 素 , 其 class 为 side-bar: 
<!-- 笔记 本 应 用 --> 


<div id="notebook"> 


<!-- 侧 边 栏 --> 

<aside class="side-bar" > 
<!-- 这 里 将 是 笔记 列表 --> 

</aside> 


<!-- 主 面板 --> 
<section class="main" > 




















(2) 添加 一 个 新 的 数据 属性 ， 名 为 notes。 该 属 


data() { 
return { 
content: ... 
// 新 的 | 一 个 笔记 数组 
notes: []， 


} 


性 是 一 个 数组 ， 包 含 所 有 的 笔记 





sy 
1. 添加 新 建 笔记 的 方法 
条 笔记 都 是 具有 如 下 数据 的 对 象 。 


每 一 

D ia: 笔记 的 唯一 标识 符 。 

口 title: 笔记 的 标题 ， 用 来 显示 在 笔记 列表 中 。 
口 

口 

口 

















content: 笔记 的 Markdown 格式 内 容 。 

created: 笔记 创建 的 日 期 。 

favorite: 这 是 一 个 布尔 值 ， 用 于 表示 是 否 收藏 了 笔记 , 已 收藏 的 笔记 显示 在 笔记 列表 
的 顶部 。 


下 面 添加 一 个 名 为 addNote 的 方法 ， 它 会 用 默认 值 创建 一 个 新 的 笔记 对 象 


methods: { 
// 用 一 些 默 认 值 添加 一 条 笔记 ， 并 将 其 添加 到 笔记 数组 中 
addNote() { 
const time = Date.now() 
// 新 笔记 的 默认 值 
const note = { 
id: String (time), 
title: 'New note ' + (this.notes.length + 1), 
content: '**Hi!** This notebook is using 
[markdown] (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet 
) for formatting!', 
created: time, 
favorite: false, 
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} 
// 添加 到 列表 中 
this.notes.push (note) 
Fs 
} 
上 面 选取 当前 时 间 (也 就 是 从 1970 年 1 月 1 日 00:00:00 UTC 开始 经 过 的 毫秒 数 ) 作为 区 分 
笔记 的 唯一 标识 符 ， 这 是 一 种 不 错 的 方式 。 此 外 ， 还 设置 了 一 些 默 认 值 ， 例 如 标题 和 一 些 内 容 ， 
以 及 created 日 期 和 favorite。 最 后 ， 我 们 将 该 笔记 添加 到 笔记 数组 属性 中 。 


2. 用 v-on 实现 按钮 的 单 击 事件 


现在 , 我 们 需要 添加 一 个 按钮 来 调用 这 个 方法 。 在 一 个 class 为 toolbar 的 div 元 素 中 添 
加 一 个 新 的 按钮 元 素 : 


<aside class="side-bar"> 
<!-- 工具 栏 --> 
<div class="toolbar"> 
<!-- 添加 笔记 按钮 --> 
<button><i class="material-icons">add</i> Add note</button> 
</div> 
</aside> 


当 用 户 单 击 按钮 时 , 需要 调用 addNote 函数 。 为 此 , 这 里 使 用 了 一 个 新 的 指令 v-on。 该 指 
令 的 值 是 一 个 函数 , 在 该 事件 被 触发 时 调用 ， 而 且 该 指令 需要 一 个 参数 来 告知 监听 的 事件 。 你 可 
能 要 问 : 如 何 传 参数 给 指令 ?很 简单 ! 在 指令 名 称 后 面 添加 一 个 冒号 〈 : ), 然后 写 上 参数 就 可 以 
了 ， 如 下 所 示 : 


<button v-directive:argument="value"> 


在 这 里 , 我们 使 用 v-on 指令 并 用 事件 名 称 当 作 参 数 ， 也 就 是 click 事件 。 看 起 来 是 这 样 的 : 


<button v-on:click="callback"> 


当 触 发 单 击 事件 时 ， 我 们 的 按钮 应 该 调用 aaqNote， 所 以 继续 修改 之 前 添加 的 按钮 : 


<button v-on:click="addNote"><i class="material-icons">add</i> Add 
note</button> 


v-on 有 一 个 可 选 的 简写 语法 e， 所 以 代码 可 以 重 构 为 : 


<button @click="addNote"><i class="material-icons">add</i> Add 
note</button> 


至 此 , 我 们 的 按钮 已 经 准备 好 了 ， 可 以 尝试 添加 一 些 笔记 。 在 应 用 中 还 看 不 到 效果 , 不 过 在 
浏览 器 的 开发 者 工具 里 可 以 注意 到 笔记 列表 的 改变 。 
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3. 用 v-bina 绑 定 属性 


如 果 能 在 Add note 按钮 上 用 提示 工具 显示 已 经 有 多 


少 条 笔记 就 好 了 ,不 是 吗 ? 这样 至 少 可 以 
引入 另外 一 个 有 用 的 指令 ! 








只 要 用 HTML 属性 title 就 可 以 添加 提示 工具 了 ， 如 下 所 示 : 


<button title="3 note(s) already"> 

上 面 的 代码 仅 支 持 静 态 文本 ,但 是 我 们 希望 能 够 让 提示 工具 随 着 笔记 数目 的 变化 而 动态 变 
化 。 好 在 通过 v-bind 指令 可 以 将 一 个 JavaScript 表达 式 绑 定 到 一 个 HTML 属性 上 。 就 像 v-on 
指令 一 样 ， 需 要 给 v-binad 传人 一 个 参数 ， 也 就 是 目标 属性 的 名 字 。 





我 们 用 一 个 JavaScript 表达 式 重 写 上 面 的 代码 : 


<button v-bind:title="notes.length + ' note(s) already'"> 


现在 ， 如 果 将 鼠标 悬 停 在 按钮 上 ， 就 可 以 看 到 已 有 笔记 的 数量 。 





口 Notebook X 


所 © | © file:///D:/Mes%20documents/GitHub, 





6 note(s) already 
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跟 v-on 一 样 , v-bind 也 有 一 个 简写 语法 (这 两 个 简写 语法 都 很 常用 ): 可 以 忽略 掉 -binad， 


只 用 :和 属性 名 。 如 下 所 示 : 





<button :title="notes.length + ' note(s) already'"> 


二 人 入 


运 上 央 。 


人 当 需 要 更 新 属性 值 的 时 候 ， 用 v-bing 指令 绑 定 的 JavaScript 表达 式 会 自动 重新 





我 们 还 可 以 把 JavaScript 表达 式 放 到 一 个 计算 属性 中 来 使 用 。 计 算 属 性 看 起 来 是 这 样 的 : 


computed: { 











addButtonTitle () { 
return notes.length + ' note(s) already' 
和 5 
3} 


接着 重 写 绑 定 属性 即 可 : 


<button :title="addButtonTitle"> 








| 


4. 用 Vv-for 显示 列表 
现在 我 们 要 在 工具 栏 下 面 显示 笔记 列表 。 
(1) 在 工具 栏 下 面 ， 添 加 一 个 新 的 aiv 元 素 , 其 class 为 notes: 


<aside class="side-bar"> 
<div class="toolbar"> 
<button @click="addNote"><i class="material-icons">add</i>Add note</button> 
</div> 
<div class="notes"> 
<!-- 笔记 列表 显示 在 这 里 --> 
</div> 
</aside> 





现在 我 们 希望 显示 一 个 aiv 元 素 列 表 ， 每 行 表示 一 条 笔记 。 为 此 ， 需 要 一 个 v-for 指令 。 


该 指令 的 值 为 一 个 特殊 的 表达 式 , 格式 为 item of items。 这 将 对 items 数组 或 对 象 进行 近 代 ， 
然后 将 一 个 item 值 暴露 给 当前 aiv 使 用 。 下 面 是 一 个 示例 : 


<div Vv-for="item of items">{{ item.title }}</div> 
也 可 以 使 用 关键 字 in 而 非 of: 

<div v-for="item in items">{{ item.title }}</div> 
假设 有 这 样 一 个 数组 : 


data() { 
return { 
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items: [ 
{ title: ‘Item 1' }, 
{ title: 'Item 2' }, 
{ title: 'Item 3' }, 
] 
} 
} 


那么 最 终 在 DOM 中 泻 染 出 的 效果 是 这 样 的 : 
<div>Item 1</div> 


<div>Item 2</div> 
<div>Item 3</div> 


0 可 以 看 到 ， 使 用 v_for 指令 的 元 素 在 DOM 中 重复 出 现 了 。 








(2) 回 到 我 们 的 笔记 应 用 中 ， 在 侧 边 栏 显示 出 笔记 列表 。 因 为 笔记 列表 是 存储 在 notes 数据 
属性 中 的 ， 所 以 只 需要 对 其 进行 迭代 即 可 : 


<div class="notes"> 
<div class="note" Vv-for="note of notes">{{note.title}}</div> 








</div> 


至 此 ， 我 们 可 以 在 添加 笔记 的 按钮 下 方 看 到 笔记 列表 了 。 





€ GC |Q© file///D:/Mes%20documents/GitHub/packt-vue-projedt 


十 Add note 


New note 1 


New note 2 


New note 3 


New note 4 


New note 5 








使 用 该 按钮 添加 几 条 笔记 ， 可 以 看 到 笔记 列表 会 自动 更 新 。 





2.2.2 ”选中 一 条 笔记 


当选 中 一 条 笔记 时 , 我 们 期 望 应 用 的 中 间 和 右 侧面 板 都 显示 该 笔记 的 相关 信息 : 可 以 在 文本 
编辑 器 修改 选中 笔记 的 内 容 , 而 预览 面板 则 实时 预览 其 Markdown 格式 效果 。 下 面 就 来 实现 它 吧 ! 
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(1) 添加 一 个 新 的 数据 属性 ， 名 为 selectedIda， 用 来 保存 选中 笔记 的 ID : 


data() { 
return { 
content: localStorage.getIitem('content') || 'You can write in 
**markdown**", 
notes: []， 


// 选中 笔记 的 ID 
selectedId: null, 


也 可 以 用 一 个 selectedNote 属性 保存 笔记 对 象 ， 但 是 这 会 使 保存 逻辑 变 得 复 
杂 ， 不 建议 这 样 做 。 
(2) 这 里 需要 一 个 新 的 方法 ， 它 会 在 我 们 单 击 一 条 笔记 时 被 调用 ， 以 选择 ID 。 就 叫 它 
selectNote 吧 ， 


methods: { 


selectNote (note) { 
this.selectedId = 
人 
} 
(3) 跟 之 前 的 添加 笔记 按钮 一 样 ， 这 里 将 使 用 v-on 指令 监听 笔记 列表 中 每 条 笔记 的 click 
和 件 : 


<div class="notes"> 
<div class="note" v-for="note of notes" 
@click="selectNote(note)">{{note.title}}</div> 
</div> 


现在 ， 当 单 击 一 条 笔记 时 ， 可 以 看 到 selectedIg 数据 属性 的 变化 。 
1. 当前 笔记 


至 此 , 我 们 知道 当前 选中 的 是 哪 条 笔记 , 可 以 替换 掉 在 刚 开始 创建 的 content 数据 属性 了 。 
使 用 计算 属性 可 以 方便 地 访问 选中 的 笔记 ， 下 面 就 来 创建 一 个 。 


(1) 添加 一 个 名 为 selectedNote 计算 属性 ， 返 回 卫 与 selecteqaia 属性 匹配 的 笔记 : 


note.id 





hl 



































computed: { 


selectedNote () { 
// 返回 与 selectedId 匹配 的 笔记 
return this.notes.find(note => note.iqd === this.selectedIgd) 
ys 
} 


2.2 多 条 笔记 27 





note => note.iqd === this.selectedId 是 ES2015 JavaScript 中 提供 的 箭头 函 
0 数 。 这 里 , 箭头 函数 的 参数 是 note, 返回 表达 式 note.id=== this.selectedId 
的 结果 。 











这 里 需要 在 代码 中 使 用 selectedNote.content 替换 老 的 content 数据 属性 。 
(2) 在 模板 中 修改 编辑 器 : 


<textarea v-model="selectedNote.content"></textarea> 


(3) 然后 ， 在 notePreview 计算 属性 中 使 用 selectedNote: 


notePreview () { 
// Markdown 转换 为 HTML 
return this.selectedNote ? marked(this.selectedNote.content) : 














es 

现在 ， 当 单 击 笔 记 列 表 中 的 笔记 时 ， 笔 记 编辑 器 和 预览 面板 将 显示 选中 笔记 的 内 容 。 

你 可 以 放心 地 移 除 content 数据 属性 、 它 的 侦 听 器 和 saveNote 方法 了 ， 之 后 不 再 使 用 。 
2. 动态 CSS 类 


当选 中 笔记 列表 中 的 一 条 笔记 时 ， 最 好 给 选中 的 笔记 添加 一 个 selectea CSS 类 ( 例如 显 
示 不 同 的 背景 色 )。 幸 好 Vue 提供 了 一 个 非常 有 用 的 技巧 来 实现 这 种 效果 : v-bina 指令 (简写 
是 : ) 有 一些 技巧 可 以 简化 对 CSS 类 的 操作 。 可 以 给 这 个 指令 传人 一 个 字符 串 数组 ， 而 不 是 一 个 
字符 串 : 
























































<div :class="['one', 'two', 'three']"> 


DOM 中 的 内 容 会 是 这 样 的 : 


<div class="one two three"> 























不 过 ,最 有 趣 的 功能 是 ,可 以 传人 一 个 键 是 类 名 、 值 是 布尔 类 型 的 字典 对 象 ， 这 个 值 决定 了 
是 否 把 每 个 类 应 用 到 元 素 中 。 下 面 是 一 个 示例 : 


<div :class="{ one: true, two: false, three: true }"> 


这 个 对 象 会 产生 如 下 的 HTML: 


<div class="one three"> 


在 我 们 的 应 用 中 , 希望 只 把 selected 类 应 用 到 选中 的 笔记 上 , 所 以 对 代码 做 如 下 简单 的 修改 : 


<div :class="{ selected: note === selectedNote }"> 


现在 笔记 列表 的 代码 看 起 来 是 这 样 的 : 
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<div class="notes"> 
<div class="note" v-for="note of notes" @click="selectNote (note)" 


:class="{selected: note === selectedNote}">{{note.title}}</div> 
< YS 


可 以 把 静态 与 动态 的 class 属性 结合 起 来 。 建 议 将 非 动态 的 类 放 到 静态 的 属性 
中 ， 因 为 Vue 会 对 静态 值 做 优化 处 理 。 


至 此 ， 当 选中 某 条 笔记 时 ， 其 背景 颜色 会 发 生 改 变 


New note 1 


New note 3 





New note 4 


New note 5 











3. 条 件 模板 v-if 


在 测试 程序 之 前 ， 还 有 最 后 一 件 事情 要 做 : 如 果 没 有 选中 任何 笔记 ， 主 面板 (笔记 编辑 右 ) 
和 预览 面板 不 应 该 显示 出 来 。 对 于 用 户 来 说 , 显示 出 空白 的 笔记 编辑 器 和 预览 面板 没有 什么 实际 
意义 ， 并 且 可 能 会 由 于 selectedNote 为 null 而 引起 程序 崩溃 。 幸 好 ，v=-if 0 
决定 哪些 模板 不 应 该 出 现 。 这 个 指令 的 工作 原理 与 JavaScript 中 的 关键 字 if 类 似 ， 带 有 一 个 
件 表达 式 。 


在 下 面 的 示例 中 ， 由 于 loading 属性 是 假 值 ，div 元 素 将 不 会 出 现在 DOM 中 : 
<div Vv-if="]oading"> 


Loading... 
</div> 


























此 外 ,还 有 v-else 和 v-else-if 这 两 个 有 用 的 指令 ， 其 工作 方式 与 你 的 预期 相同 : 


<div v-if="]oading"> 
Loading... 
</div> 


<div v-else-if="processing"> 
Processing 
/GOV 


<div v-else> 
Content here 
</div> 
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回 到 我 们 的 应 用 中 , 给 主 面板 和 预览 面板 添加 v-if="selectegdNote" 条 件 。 这 样 在 没有 选 
择 笔记 的 时 候 ， 它 们 就 不 会 出 现在 DOM 中 : 


<!-- 主 面板 --> 
<section class="main" Vv-if="selectedNote"> 


</section> 


<1-- 预览 面板 --> Cn 


<aside class="preview" Vv-if="selectedNote" v-hntml="notePpreview"> 
</aside> 


上 面 的 代码 重复 使 用 了 v-if 指令 ， 其 实 不 太 好 ， 个 过 Vue 已 经 为 我 们 考虑 到 这 个 问题 了 。 
可 以 把 这 两 个 元 素 放 在 一 个 特殊 的 <-template> 标 签 里 ， 这 有 点 像 JavaScript 中 的 花 括 号 : 
<template v-if="selectedNote"> 


<!-- 主 面板 --> 
<section class="main"> 

















</section> 


<!-- 预览 面板 --> 
<aside class="preview" v-html="notePreview"> 
</aside> 

</template> 


至 此 ， 应 用 看 起 来 如 下 图 所 示 。 











Guest 过 口 x 
DD Notebook x WW 

Ds C 1@ file:///D:/Mes%20documents/GitHub/packt-vue-project-guide/chapter2-full/index.html 
**Hil** This notebook is using [markdown] 站 : PN WA 1 

十 Add note (hELpS: /github Con/adam-b /markdow: Hi! This notebook is using markdown for formatting! 
here/wiki/Markdown-Cheatsheet) for formatting! 

New note 1 

New note 3 

New note 4 


New note 5 
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<template> 标 签 不 会 出 现在 DOM 中 。 它 就 像 一 个 幽灵 元 素 ， 用 于 对 实际 的 元 
素 进 行 重 新 组 合 。 


4. 使 用 deep 选项 保存 笔记 





现在 ， 我 们 希望 能 够 在 不 同 的 会 话 之 间 保 存 和 恢复 笔记 ， 跟 之 前 对 笔记 内 容 所 做 的 一 样 。 


(1) 首先 创建 一 个 新 的 方法 : saveNotes。 由 于 无 法 使 用 1ocalstorage API ( 它 只 接收 字 
竺 串 ) 保存 一 个 数组 对 象 ， 需 要 用 JsoN. stringify 把 数组 对 象 转换 为 JSON 字符 串 : 


methods: { 


站 





一 


saveNotes() { 
// 在 存储 之 前 不 要 忘记 把 对 象 转换 为 JSON 字符 串 
localStorage.setItem('notes', JSON.stringify(this.notes)) 
console.log('Notes saved!', new Date()) 
下 
} 








跟 之 前 处 理 content 属性 时 一 样 ， 这 里 也 会 侦 听 notes 数据 属性 的 变化 。 一 旦 发 生变 化 ， 
就 触发 saveNotes 方法 。 


肯 


(2) 在 watch 选项 中 添加 一 个 侦 听 器 : 


watch: { 
notes: 'saveNotes', 


} 


现在 ， 如 果 你 添加 一 些 笔记 的 话 ， 可 以 在 浏览 器 控制 台 看 到 像 下 面 这 样 的 内 容 输出 : 


Notes saved! Mon Apr 42 2042 17:40:23 GMT+0100 (Paris, Madrid) 
Notes saved! Mon Apr 42 2016 17:42:51 GMT+0100 (Paris, Madrid) 


(3) 在 aata 钩子 中 修改 notes 属性 的 初始 化 代码 ,从 1ocalstorage 中 加 载 保存 的 笔记 列表 : 


data() { 
return { 
notes: JSON.parse(localStorage.getItem('notes')) || [], 
selectedId: nuill, 
} 
} > 





到 这 里 ， 当 刷新 应 用 时 , 最 新 添加 的 笔记 也 会 被 恢复 出 来 。 然而 , 如 果 修 改 某 条 笔记 的 内 容 ， 
会 发 现 这 不 会 触发 notes 侦 听 器 ， 也 就 不 会 保存 相关 的 笔记 内 容 。 这 是 因为 侦 听 器 默认 只 侦 听 
目标 对 象 的 直接 变化 : 赋 一 个 简单 的 值 ， 在 数组 中 添加 、 删 除 或 移动 某 项 。 例 如 ， 下 面 的 操作 默 
认 会 被 检测 到 : 


// 赋值 
this.selectedId = 'abcd' 
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// 在 数组 中 添加 或 删除 某 项 
this.notes.push({...}) 
this.notes.splice (index, 1) 


// 数组 排序 
this.notes.sort(...) 


但 是 ， 所 有 其 他 操作 都 不 会 触发 侦 听 器 ， 如 下 所 示 : 
// 给 某 个 属性 或 者 哈 套 对 象 典 什 


this.myObject.someAttribute = 'abcd' 
this.myObject.nestedObject.otherAttribute = 42 


// 修改 数组 中 某 项 的 内 容 


this.notes[0] .content = 'new content' 
这 种 情况 下 ， 需 要 在 侦 听 器 上 添加 deep 选项 : 
watch: { 
notes: { 
// 方法 名 


handler: 'saveNotes', 
// 需要 使 用 这 个 选项 来 侦 听 数组 中 每 个 笔记 属性 的 变化 
deep: true, 
} 
} 
通过 上 面 的 代码 ，Vue 就 能 够 递归 地 侦 听 notes 数组 中 对 象 和 属性 的 变化 了 。 现 在 ， 如 果 
在 文本 编辑 器 中 输入 一 些 内 容 ， 笔 记 列表 会 被 保存 : v-model 指令 会 修改 选中 笔记 的 content 
如 性 ， 而 通过 deep 选项 则 可 以 触发 保存 方法 saveNotes 的 调用 。 


5. 保存 选中 项 


如 果 应 用 在 再 次 打开 的 时 候 能 够 选择 上 次 选中 的 笔记 , 对 用 户 来 说 会 非常 方便 。 要 实现 这 个 
功能 ， 只 需要 保存 并 加 载 selecteqId 数据 属性 即 可 ， 该 数据 属性 用 于 记录 选中 笔记 的 ID。 这 
里 同样 用 侦 听 器 来 触发 保存 操作 : 


watch: { 





















































// 保存 选中 项 
SelectedId (val) { 
localStorage.setIitem('selected-id', val) 
} 
} 


同样 ， 当 属性 初始 化 的 时 候 ， 对 值 进行 恢复 : 


data() { 
return { 
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notes: JSON.parse(localStorage.getIitem('notes')) || [], 
selectedId: localStorage.getIitem('selected-id') || null, 
} 
}, 


这 样 就 完成 了 ! 现在 ， 当 刷新 应 用 时 ， 会 自动 选择 上 次 离开 时 选中 的 笔记 。 








2.2.3 ”笔记 工具 栏 


到 现在 , 我 们 的 应 用 还 缺失 一 些 功能 , 例如 删除 或 重 命名 选中 的 笔记 。 下 面 就 在 新 的 工具 栏 
中 实现 这 些 功能 ， 该 工具 栏 位 于 笔记 编辑 器 上 方 。 在 主 面板 中 添加 一 个 class 为 toolbar 的 
div 元 素 : 








<!-- 主 面板 --> 
<section class="main"> 
<div class="toolbar"> 
<!-- 新 的 工具 栏 添加 在 这 里 !| --> 
</div> 
<textarea v-model="selectedNote.content"></textarea> 
</div> 


我 们 将 在 工具 栏 中 添加 三 个 功能 : 
口 重 命名 笔记 ; 
口 删除 笔记 ; 
口 收藏 笔记 。 

1. 重 命名 笔记 

这 个 功能 相对 来 说 是 最 简单 的 ， 只 需要 使 用 v-model 指令 将 一 个 文本 输入 框 与 选中 笔记 的 
title 属性 绑 定 在 一 起 就 可 以 了 。 

在 刚刚 创建 好 的 aiv 元 素 中 添加 一 个 input 元 素 ， 其 中 有 v-model 指令 以 及 一 个 
placeholdqez 来 提醒 用 户 其 功能 : 

<input v-model="selectedNote.title" placeholder="Note title" /> 

现在 在 笔记 编辑 器 上 方 有 了 一 个 重 命名 笔记 的 字段 , 可 以 看 到 笔记 列表 中 的 笔记 名 字 会 随 着 
输入 的 内 容 变 化 。 
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New note 1 


New note 3 


New note 4 


New note 5 








因为 之 前 在 notes 侦 听 器 中 设置 过 deep 选项 ， 所 以 每 当 修改 选中 笔记 的 名 字 
时 ， 笔 记 列 表 都 会 被 保存 。 


2. 删除 笔记 
这 个 功能 稍微 有 点 复杂 ， 需 要 一 个 新 的 函数 。 
(1) 在 重 命名 文本 框 后 面 添加 一 个 button 元 素 : 


<button @click="removeNote" title="Remove note"><i 
class="material-icons">delete</i></button> 


上 面 的 代码 使 用 v-on 的 简写 ( e 字 符 ) 来 监听 click 事件 , 而 这 会 调用 removeNote 方法 
( 稍 后 实现 )。 同 时 ， 还 给 这 个 按钮 设置 了 一 个 合适 的 图 标 。 


(2) 添加 一 个 removeNote 方法 ， 用 于 向 用 户 确认 删除 操作 ， 并 使 用 splice 标准 数组 方法 
将 当前 选中 的 笔记 从 notes 数组 中 移 除 : 


removeNote() { 
if (this.selectedNote && confirm('Delete the note?')) { 
// 将 选中 的 笔记 从 笔记 列表 中 移 除 
const index = this.notes.indexOf (this.selectedNote) 
if (index !== -1) { 
this.notes.splice (index, 1) 


3 
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现在 ， 如 果 删 除 当 前 笔记 时 ， 会 发 生 如 下 三 件 事情 : 
口 笔记 将 从 左 侧 的 笔记 列表 中 移 除 ; 
口 笔记 编辑 器 和 预览 面板 会 隐藏 起 来 ; 
口 笔记 列表 将 被 保存 (可 以 在 浏览 器 控制 台 观 察 到 )。 

3. 收 藏 笔记 

最 后 一 个 工具 栏 功 能 是 最 复杂 的 。 我 们 和 希望 对 笔记 列表 重新 排序 : 收藏 的 笔记 在 最 前 面 。 为 
此 ， 每 条 笔记 都 有 一 个 布尔 属性 favorite， 用 于 一 个 开关 按钮 。 另 外 ,在 笔记 列表 中 将 用 一 个 
星 型 图 标 标示 出 已 经 收藏 的 笔记 。 


(1) 在 工具 栏 的 删除 按钮 前 面 添加 另外 一 个 按钮 : 


<button @click="favoriteNote" title="Favorite note"><i 
class="material-icons">{{ selectedNote.favorite ? 'star' : 
'star_border' }}</i></button> 


同样 ， 使 用 v-on 的 简写 来 调用 favoriteNote 方法 ( 稍 后 创建 )。 另 外 ， 还 会 根据 当前 选 
中 笔记 的 favorite 属性 值 显示 一 个 图 标 : 如 果 是 true 就 显示 一 颗 完 整 的 星星 , 否则 显示 一 个 
轮廓 。 


最 终 的 结果 看 起 来 如 下 所 示 。 


















































如 果 笔 记 没 有 被 收藏 , 就 显示 左边 的 按钮 。 当 单 击 该 按钮 时 , 就 显示 右边 的 按钮 表示 已 收藏 。 
(2) 创建 一 个 非常 简单 的 favoriteNote 方法 ,用 于 在 选中 笔记 时 反 转 favorite 布尔 属性 : 


favoriteNote() { 
this.selectedNote.favorite = !this.selectedNote.favorite 


}, 


也 可 以 用 异 或 运算 符 (^) 重 写 上 面 的 代码 : 


favoriteNote() { 
this.selectedNote.favorite = this.selectedNote.favorite ^~ true 


}, 


还 可 以 用 更 好 的 简写 形式 : 


favoriteNote() { 
this.selectedNote.favorite ^= true 


}, 















































虽然 现在 可 以 切换 收藏 按钮 了 ， 但 是 还 没有 任何 实际 效果 。 
我 们 需要 按照 两 个 步骤 对 笔记 列表 进行 排序 : 首先 根据 创建 时 间 对 所 有 笔记 排序 , 然后 把 收 
藏 的 笔记 排列 在 前 面 。 这 里 可 以 使 用 标准 数组 方法 sort ， 它 非常 方便 。 该 方法 接收 一 个 参数 ， 
而 该 参数 是 接收 两 个 参数 的 函数 ， 然 后 对 这 两 个 参数 做 比较 。 比 较 结果 是 一 个 数 ， 如 下 所 示 。 
口 0: 两 个 参数 相等 。 本 
口 -1: 第 一 个 参数 在 第 二 个 参数 前 面 。 
口 1: 第 一 个 参数 在 第 二 个 参数 后 面 。 


的 是 -42， 则 结果 与 -1 一 样 。 
第 一 步 排序 操作 可 以 通过 下 面 的 减法 代码 完成 : 
sort((a, b) => a.created - b.created) 


这 里 ,对 两 条 笔记 的 创建 时 间 做 比较 。 创 建 时 间 是 按照 毫秒 存储 的 ， 取 自 Date .now()。 只 
需要 对 这 两 个 时 间 值 做 减法 : 如 果 a 的 创建 时 间 在 b 之 前 ， 则 是 负 值 ; 如果 a 的 创建 时 间 在 b 
之 后 ， 则 是 正 值 。 

第 二 步 排序 操作 使 用 两 个 三 元 操作 : 


Sorti((a,; $B) 三 > (a. {avorite 三 三 = bfavorite)? 0 "a.favorite? = 二 ) 


如 果 两 条 笔记 都 已 收藏 ， 则 不 改变 它们 的 位 置 。 如 果 仅 收藏 了 a， 则 返回 一 个 负 值 ,将 其 排 
到 ? 的 前 面 。 如 果 仅 收藏 了 pb， 就 返回 一 个 正 值 ， 在 笔记 列表 中 将 b 放 到 a 的 前 面 。 


最 好 的 办 法 是 创建 计算 属性 sortedNotes， 这 样 就 能 通过 Vue 提供 的 机 制 对 排序 自动 更 新 
和 缓存 了 。 


(3) 创建 一 个 新 的 计算 属性 sortedNotes: 


computed: { 


并 不 一 定 使 用 数字 1， 而 是 可 以 返回 任意 的 数 ( 正 值 或 负 值 )。 例 如， 如 果 返 回 
























































sortedNotes() { 
return this.notes.slice() 
.Sort((a, b) => a.created - b.created) 
.sort((a, b) => (a.favorite === b.favorite) ? 0 
“favVOrite. 2 -+4 
i 
} 
} 


由 于 sort 方法 会 直接 修改 源 数组 ， 这 里 使 用 slice 方法 创建 新 的 副本 。 这 样 
可 以 防止 触发 notes 侦 听 器 。 
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现在 可 以 在 显示 笔记 列表 的 v-for 指令 中 使 用 sortedNotes 替换 notes 了 ， 这样 就 会 如 
预期 一 样 对 笔记 自动 排序 : 


<div v-for="note of sortedNotes"> 


如 果 笔 记 已 收藏 ， 可 以 使 用 v-if 指令 显示 一 个 星 型 图 标 。 


<i class="icon material-icons" Vv-if="note.favorite">star</i> 


(4) 修改 笔记 列表 的 最 终 代 码 是 这 样 的 : 


<div class="notes"> 
<div class="note" v-for="note of sortedNotes" 
:class="{selected: note === selectedNote}" 
@click="selectNote (note) "> 
<i class="icon material-icons" v-if="note.favorite"> 
star</i> 
{{note.title}} 
</div> 
LVS 


应 用 现在 看 起 来 如 下 所 示 。 





口 Notebook x 


A c | © file:///D:/Mes%20documents/GitHub/packt-vue-project-guide/chapter2-full/index.html | : 

十 Add note Meow 四 Hi! This notebook is using markdown for formatting! 
**Hil** This notebook is using [markdown] 

Meow 人 Chttps: //github. com/adam-p/markdown- 


here/wiki/Markdown-Cheatsheet) for formatting 








New note 1 


New note 3 


New note 4 


New note 5 











2.2.4 ”状态 栏 


最 后 , 我 们 将 给 应 用 添加 一 个 状态 栏 ,状态 栏 位 于 笔记 编辑 器 的 底部 , 显示 一 些 有 用 的 信息 : 
笔记 的 创建 日 期 以 及 总 行 数 、 单 词 数 和 字符 数 。 
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创建 一 个 新 的 aiv 元 素 , class 为 toolbar 和 status-bar, 并 将 其 放置 在 textarea 元 


素 的 后 面 : 


<!-- 主 面板 --> 
<section class="main"> 
<div class="toolbar"> 
让 
</div> 
<textarea v-model="selectedNote.content"></textarea> 
<div class="toolbar status-bar"> 
<!-- 新 的 状态 栏 在 这 里 !| --> 
</div> 
</section> 


1. 创建 日 期 过 滤器 
首先 ， 我 们 要 在 状态 栏 显示 选中 笔记 的 创建 日 期 。 





(1) 在 状态 栏 的 aiv 元 素 中 ， 创 建新 的 span 元 素 ， 如 下 所 示 : 





<span class="date"> 

<span class="label">Created</span> 

<span class="value">{{ selectedNote.created }}</span> 
</span> 








现在 ， 如 果 观 察 浏 览 器 中 的 显示 结果 ， 可 以 看 到 一 串 数 字 ( 代表 笔记 创建 日 期 的 毫秒 数 )。 
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9 **Hi!l** This notebook is using [markdown] 
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但 是 显示 这 样 的 数字 对 用 户 非常 不 友好 ! 





我 们 需要 引入 新 的 库 momentjs 对 日 期 进行 格式 化 ,以 便 显 示 的 日 期 可 读 。momentjs 是 一 





个 流行 的 时 间 和 日 期 操作 库 。 


(2) 跟 引 入 marked 库 的 方式 一 样 ， 在 页 面 中 引入 momentjs: 


<script src="https://unpkg.com/moment"></script> 
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为 了 格式 化 日 期 , 首先 需要 创建 一 个 moment 对 象 ,然后 使 用 它 提供 的 format 方法 ， 如 下 
所 示 : 


moment (time) .format ('DD/MM/YY, HH:mm') 

是 时 候 引 入 本 章 中 Vue 的 最 后 一 个 功能 了 : 过 滤器 。 过 滤器 主要 用 于 模板 内 部 , 在 数据 展示 
之 前 或 者 传递 给 一 个 属性 之 前 对 其 进行 处 理 。 例 如 , 在 模板 中 用 一 个 大 写 过 滤器 将 字符 串 转 换 为 
大 写字 母 , 或 者 用 一 个 货币 过 滤器 对 货币 进行 即时 转换 。 过 滤器 接收 一 个 参数 ， 即 需要 过 滤器 处 
理 的 值 ， 并 返回 处 理 后 的 值 。 

因此 , 我 们 需要 创建 一 个 新 的 aate 过 滤器 , 接收 一 个 日 期 时 间 , 然后 返回 人 类 可 读 的 格式 。 

(3) 使 用 Vue .filter 全 局 方法 (不 在 Vue 实例 的 创建 代码 中 ， 比 如 位 于 文件 开头 ) 注册 这 
个 过 滤 需 : 


Vue.filter('date', time => moment (time) 
.format ('DD/MM/YY, HH:mm')) 


现在 可 以 在 模板 中 使 用 这 个 aate 过 小 器 显示 日 期 了 。 语 法 为 JavaScript 表达 式 ( 跟 之 前 使 
用 过 的 一 样 ) 后 跟 一 个 管道 操作 符 以 及 过 滤 右 的 名 字 : 

{{ someDate | date }} 

如 果 someDate 包含 一 个 日 期 ， 那 么 会 在 DOM 中 输出 格式 为 DD/MM/YY，HH:mm 的 日 期 : 


L202 LY 2 Ad2 


(4) 修改 状态 模板 : 


<span class="date"> 

<span class="label">Created</span> 

<span class="value">{{ selectedNote.created | date }}</span> 
</span> 


至 此 ， 可 以 在 应 用 中 看 到 一 个 友好 的 日 期 格式 了 。 
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2. 文本 统计 
最 后 ， 我 们 希望 显示 “面向 作者 ”的 统计 数据 : 行 数 、 单 词 数 和 字符 数 。 
(1) 先 针对 这 3 类 数据 创建 3 个 计算 属性 ， 然 后 使 用 一 些 正 则 表达 式 做 数据 统计 : 


computed: { 
linesCount() { 
if (this.selectedNote) { 
// 计算 换行 符 的 个 数 
return this.selectedNote.content.split(/\r\n|\r|\n/) .length 
} 
} 








wordsCount () { 
if (this.selectedNote) { 
var s = this.selectedNote.content 
// 将 换行 符 转 换 为 空格 
s = s.replace(/\n/g, ' ') 
/7 排除 开头 和 p 结 尾 的 空格 
S = s.replace(/(^\s*)|(\s*$)/gi, '') 
// 将 多 个 重复 空格 转换 为 一 个 
S = s.replace(/\s\s+/gi, ' ') 
// 返回 空格 数量 
return s.split(' ').length 
} 
l 











charactersCount() { 
if (this.selectedNote) { 
return this.selectedNote.content.split('').length 
} 
. 
} 


程序 在 某 些 时 候 甬 溃 。 比 如 在 使 用 Vue 开发 者 工具 检查 应 用 时 ， 因 为 这 会 对 所 
有 的 属性 做 计算 。 


(2) 现在 可 以 添加 3 个 新 的 span 元 素 用 于 统计 ， 并 使 用 相应 的 计算 属性 : 


<span class="]ines"> 

<span class="label">Lines</span> 

<span class="value">{{ linesCount }}</span> 
</span> 
<span class="words"> 

<span class="label">Words</span> 

<span class="value">{{ wordsCount }}</span> 
</span> 
<span class="characters"> 

<span class="label">Characters</span> 

<span class="value">{{ charactersCount }}</span> 
</span> 


' 这 里 增加 了 一 些 条 件 判 断 , 以 防 在 没有 选中 笔记 时 执行 相关 代码 ,这样 可 以 避免 





HH 
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最 终 ， 状 态 栏 看 起 来 如 下 所 示 。 


**Hil** This notebook is using [markdown] 
Friends birthdays (https://github.com/adam-p/markdown- 
here/wiki/Markdown-Cheatsheet) for formatting! 
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2.3 小 结 


本 章 创 建 了 第 一 个 真正 的 Vue 应 用 ， 并 实现 了 一 些 有 用 的 功能 ， 比 如 实时 预览 Markdown、 
笔记 列表 ,以 及 笔记 的 本 地 存储 。 我 们 介绍 了 Vue 的 一 些 重要 功能 ， 比 如 会 按 需 自动 更 新 和 缓存 
的 计算 属性 , 复 用 函数 中 逻辑 的 methods, 在 属性 发 生变 化 时 触发 相关 代码 的 侦 听 器 , 创建 Vue 
实例 时 执行 代码 的 生命 周期 钩子 ， 以 及 在 模板 中 轻松 处 理 数 据 的 过 滤器 。 同 时 , 我 们 还 在 模板 中 
使 用 了 大 量 的 Vue 指令 ， 比 如 利用 v-mogdel 进行 表单 输入 的 绑 定 ， 利 用 v-html 在 JavaScript 
属性 中 显示 动态 HTML， 利 用 v-for 迭代 元 素 和 显示 列表 ， 利 用 v-on (或 e ) 来 监听 事件 ， 利 
用 v-pbina (或 : ) 动态 地 绑 定 HTML 属性 到 JavaScript 表达 式 或 者 动态 地 应 用 CSS 类 ， 以 及 利 
用 v-if 根据 JavaScript 表达 式 判断 是 否 包含 部 分 模板 内 容 。 我 们 把 所 有 这 些 技术 点 集成 到 了 一 
个 功能 相当 完整 的 Web 应 用 中 ， 是 Vue 的 优秀 功能 帮助 我 们 高 效 地 完成 了 工作 。 


下 一 章 将 开始 一 个 新 的 项 目 : 一 个 基于 卡 牌 的 浏览 器 游戏 。 在 这 个 新 项 目 中 , 我 们 将 介绍 一 
些 新 的 Vue 功能 ， 并 在 恰当 的 地 方 复 用 之 前 学 过 的 技能 ， 继 续 构 建 出 更 好 、 更 漂亮 的 Web 应 用 。 


























项 目 2: 城堡 决斗 游戏 








本 童 将 创建 一 个 完全 不 同 的 应 用 : 一 个 基于 浏览 器 的 游戏 。 该 游戏 包含 两 名 玩家 ， 每 名 玩家 
控制 一 座 城堡 , 利用 手 里 的 行动 卡 牌 将 对 方 的 食物 或 生命 值 降 为 0, 以 达到 摧毁 对 方 城堡 的 目的 。 
在 本 项 目 以 及 下 一 个 项 目 中 , 我 们 将 把 应 用 分 割 成 各 种 可 复 用 的 组 件 。 组 件 是 应 用 框架 的 核 


心 , 应 用 涉及 的 所 有 API 都 围绕 这 一 理念 来 构建 。 我 们 将 看 到 如 何 定义 和 使 用 组 件 ,以 及 如 何 让 
这 些 组 件 相互 通信 。 这 样 ， 应 用 的 结构 会 更 加 合理 。 








3.1 游戏 规则 
下 面 是 游戏 中 要 实现 的 规则 ， 


口 两 名 玩家 轮流 出 牌 ; 

口 游戏 开始 时 每 名 玩家 有 10 点 生命 值 、10 份 食物 和 5 张 手 牌 ; 

口 玩家 最 高 生命 值 为 10 点 ， 食 物 最 多 10 份 ; 

口 当 玩家 的 食物 或 生命 值 为 0 时 就 失败 了 ; 

口 两 名 玩家 都 可 能 在 平局 中 失败 ; 

口 在 每 个 回合 中 ， 玩 家 能 做 的 操作 就 是 打出 一 张 牌 ， 将 其 放 到 弃 牌 推 中 ; 
口 在 每 个 回合 开始 ， 玩 家 从 抽 牌 堆 中 摸 一 张 牌 (第 一 回合 除外 ); 

口 根据 前 面 两 条 规则 ， 玩 家 在 每 个 回合 开始 的 时 候 都 有 5 张 牌 ; 

口 当 玩家 摸 牌 时 ， 如 果 抽 牌 堆 空 了 ， 将 会 把 奔 牌 堆 中 的 牌 重新 放 进 抽 牌 堆 ; 
口 卡 牌 可 以 改变 玩家 自己 或 对 手 的 生命 值 和 食物 点 数 ; 

口 有 些 卡 牌 还 可 以 让 玩家 跳 过 当前 回合 。 


游戏 的 玩法 是 , 玩家 在 每 个 回合 只 能 且 必 须 出 一 张 牌 ,并 且 大 多 数 牌 都 会 带 来 负面 效果 ( 最 
常见 的 就 是 减少 食物 点 数 )。 所 以 在 出 牌 之 前 需要 思考 你 的 策略 。 

应 用 由 两 层 组 成 : 一 层 是 游戏 世界 ， 用 来 绘制 游戏 对 象 ， 如 场景 和 城堡 等 ; 另 一 层 是 用 户 
界面 。 
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游戏 世界 包括 两 座 相对 而 立 的 城堡 、 高 台 ， 以 及 有 云 打 严 动 的 天 空 。 每 座 城堡 有 两 面 旗帜 : 
绿色 旗帜 代表 玩家 的 食物 ( 左 侧 ), 红色 弃 帜 代表 玩家 的 生命 值 ( 右 侧 ) 在 旗帜 旁边 有 两 个 小 气 
泡 用 来 显示 剩余 的 食物 和 生命 值 。 





对 于 用 户 界面 ， 顶 部 有 一 个 项 栏 ， 用 来 显示 游戏 回合 数 和 两 名 玩家 的 姓名 。 在 屏幕 的 底部 ， 


Anne of Cleves wy William the Bald 


本 


Chapel dcUELN Quick Repair Farm Trebuchet 
@ @ @ @ @ 


Spend 3 Food 


Do nothing Repair 3 D. Gather 5 Food‘# 
(1 amage 二 
Gather2 Food 产 Pp 9 | Skip your next turn 


Spend 3 Food # 
Take 1 Damage= 
Deal 4 Damage= 








3.1 游戏 规则 43 








除 此 之 外 , 还 有 一 些 译 层 界面 会 定时 出 现 并 隐藏 玩家 手 牌 , 其 中 一 个 浮 层 会 显示 下 一 回合 玩 


家 的 姓名 。 


Anne of Cleves 





Turn 6 


William the Bald, 
your turn has come! 


Tap to continue 


ME:T dt 








随 着 上 一 个 浮 层 的 消失 , 会 出 现 第 二 个 浮 层 ， 显示 上 一 回合 对 手 出 的 牌 。 这 样 两 名 玩家 就 能 
在 同一 个 屏幕 上 (例如 在 平板 电脑 上 ) 玩 游戏 了 。 


Anne of Cleves 











Turn6 


MWA:T | 





Anne of Cleves just played: 


Quick Repair 


Spend 3 Food # 


Repair 3 Damage 二 




















家 开始 新 的 游戏 。 


第 三 个 浮 层 是 在 游戏 结束 时 显示 玩家 的 输 启 情况 。 点 击 这 个 浮 层 , 会 重新 加 载 界面 ， 以 便 玩 
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Anne of Cleves Turn 6 Williiam the Bald 


Game Over 


Anne of Cleves is victorious 


William the Bald is defeated 











3.2 ”项目 设置 


下 载 第 3 章 的 源 代码 文件 ,并 将 项 目 解压 到 一 个 空 文件 夹 中 。 解 压 后 ,该 文件 夹 将 包含 如 下 
内 容 。 


口 index.html: Web 页 面 

口 style.css: CSS 文件 

D svg: 包含 游戏 中 所 有 的 SVG 图 像 

口 cards.js: 准备 使 用 的 所 有 卡 牌 数据 

D statejs: 在 这 里 整合 了 游戏 的 主要 数据 属性 
口 utils.js: 在 这 里 编写 一 些 有 用 的 函数 

口 banner-template.svg: 稍 后 使 用 这 个 文件 中 的 内 容 


我 们 将 从 最 主要 的 JavaScript 文件 开始 : 创建 一 个 名 为 mainjs 的 文件 。 


打开 index.html 文件 ， 在 state.js 的 后 面 添加 一 个 script 标签 用 来 引用 刚刚 创建 的 main.js。 
<!-- 脚本 --> 


HCOrIDE 从] 全 下 SEC 过 
< CriBt Sros"carde. J S/SCridt> 
<script src="state.js"></script> 
<script src="main.js"></script> 



































在 main.js 文件 中 创建 应 用 的 主 Vue 实例 : 
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new Vue ({ 
name: 'game', 
el: '#app', 

} 


至 此 ， 一 切 准 备 就 绪 ! 


3.3 暴风雨 前 的 平静 


本 节 将 介绍 一 些 Vue 的 新 功能 , 例如 组 件 、 属 性 和 事件 的 触发 。 这 些 功 能 有 助 于 游戏 应 用 的 
开发 。 





3.3.1 模板 选项 


在 index.html 文件 中 有 一 个 #app 元 素 ， 里 面 是 空 的 。 实 际 上 ， 我 们 并 不 需要 在 里 面 写 任何 
内 容 。 相 反 ， 我 们 会 在 创建 Vue 实例 时 ， 直 接 使 用 模板 选项 。 下 面 就 试 一 下 模板 的 用 法 : 
new Vue ({ 


name: 'game', 
el: '#app', 


























template: “<div id="#app"> 
Hello world! 
LV 
} 
在 上 面 的 代码 中 ,我 们 使 用 了 一 种 新 的 JavaScript 字符 串 。 它 通过 反 引 号 (` ) 允许 我 们 直接 
使 用 多 行文 本 ， 无 须 编 写 各 种 字符 串 连 接 符 。 


现在 运行 应 用 ， 可 以 看 到 文本 Hello world!。 正 如 你 所 猜测 的 ， 我们 并 不 在 之 前 的 #app 
中 内 艇 模板 。 























3.3.2 ”应 用 的 state 


正如 之 前 所 说 ，statejs 文件 用 于 统一 存放 应 用 的 主要 数据 。 这 样 方便 编写 游戏 的 逻辑 函数 ， 
不 会 因为 需要 大 量 方法 而 污染 定义 对 象 。 


(1) state.js 文件 中 定义 了 一 个 state 变量 ， 将 用 于 存放 应 用 中 的 数据 。 可 以 直接 将 其 当 作 
data 选项 使 用 ， 如 下 所 示 : 


new Vue ({ 

Ws 二 

data: state, 
} 
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现在 ， 如 果 打 开 开发 者 工具 ， 可 以 看 到 已 经 在 state 对 象 中 声明 的 数据 属性 。 





[x [| Elements Console Vue Sources Network Timeline Profiles Application Security Audits Adblock Plus : Xx 





4 Ready. Detected Vue 2.1.8 人 Components 如 Vuex 池 Events £7 Refresh 


Q Fiterco . Game> ©@ InspectDOM 


<Game > 一 $vme 
worldRatio: 9.665625 


























worldRatio 是 一 个 数 ， 表 示 需 要 将 游戏 中 的 对 象 调整 为 多 大 比例 来 适 配 浏览 器 窗口 。 例 
如 ，.6 表示 需要 把 界面 和 对 象 缩放 为 原始 尺寸 的 60%。 这 个 数 是 通过 utilsjs 中 的 方法 
getWorldRatio 计算 出 来 的 。 

这 里 还 少 做 了 一 件 事情 ， 当 窗 口 大 小 发 生变 化 时 ， 并 不 会 重新 计算 worlgdRatio 的 值 。 这 
需要 我 们 自己 来 实现 。 在 Vue 实例 构造 器 之 后 ,添加 一 个 事件 监听 器 到 windaow 对 象 中 ,监听 浏 
览 如 窗口 大 小 的 变化 。 

(2) 在 处 理 函 数 中 ， 更 新 state 的 worlgRatio 数据 属性 。 同 时 还 可 以 在 模板 中 显示 出 
worldRatio 的 值 : 








new Vue ({ 
name: 'game', 
el: '#app', 


data: state, 


template: “<div id="#app"> 
{{ worldRatio }} 
/LY 


}) 


// 窗口 大 小 变化 的 处 理 
window.addEventListener('resize', () => { 
state.worldRatio = getWorldRatio() 


}) 
试 着 改变 浏览 需 窗 口 的 宽度 ，Vue 应 用 中 的 worlaRatio 数据 属性 会 更 新 。 











orl 


稍 等 ! 我 们 修改 的 是 state 对 象 ， 而 不 是 Vue 实例 。 
没 错 ! 我 们 已 经 将 state 对 象 设置 为 Vue 实例 的 aata 属性 了 。 也 就 是 说 ，Vue 可 以 对 其 做 出 
响应 。 稍 后 可 以 看 到 ， 我 们 可 以 通过 修改 状态 的 属性 来 更 新 应 用 。 
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(3) 为 了 确保 状态 是 应 用 的 响应 式 数据 ， 可 以 比较 一 下 实例 数据 对 象 和 全 局 state 对 象 : 


new Vue ({ 
4 le 
mounted() { 
console.log(this.s$data === state) 
js 
} 





可 以 看 出 ， 它 们 是 同一 个 对 象 : 之 前 设置 的 aata 选项 。 因 此 当 进 行 下 面 的 操作 时 : 
this.worldRatio = 42 
也 做 了 下 面 的 操作 : 
this.sSdqata.worldqRatio = 42 
实际 上 ， 这 和 下 面 一 样 : 


state.worldRatio = 42 


通过 state 对 象 来 更 新 游戏 数据 ， 对 于 游戏 函数 的 编写 非常 有 好 处 。 


3.3.3 万 能 的 组 件 


组 件 是 构建 本 章 应 用 的 基础 模块 , 是 Vue 应 用 的 核心 概念 。 组件 是 视图 的 一 个 个 小 部 分 ， 
此 相对 来 说 应 该 比较 小 、 可 复 用 , 并 且 尽 可 能 地 自给 自足 。 采 用 组 件 构 建 应 用 有 助 于 应 用 的 维护 
和 升级 ， 特 别 是 当 应 用 规模 变 大 之 后 。 实 际 上 ， 这 已 经 成 为 了 高 效 、 可 控 地 开发 大 型 Web 应 用 
的 标准 方法 。 






































具体 而 言 ， 你 的 应 用 将 是 由 许多 小 型 组 件 构成 的 一 棵 大 树 。 




















例如 , 你 的 应 用 中 可 能 有 一 个 表单 组 件 ， 其 中 包括 一 些 输入 组 件 和 按钮 组 件 。 每 个 组 件 都 是 
用 户 界面 中 非常 具体 的 一 部 分 , 并 且 在 整个 应 用 中 都 是 可 复 用 的 。 由 于 组 件 的 作用 范围 很 小 ， 所 
以 很 容易 理解 和 推测 ， 遇 到 问题 时 候 也 更 容易 维护 〈 修复 问题 ) 和 升级 。 
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3.4 构建 用 户 筑 面 


我 们 首先 要 创建 的 组 件 是 用 户 界面 的 一 部 分 。 用户 界 面 主要 包括 顶 栏 ( 显示 玩家 姓名 和 回合 
数 )， 卡 牌 的 名 称 和 描述 ， 当 前 玩家 的 手 牌 列表 ， 以 及 三 个 浮 层 界面 。 








3.4.1 第 一 个 组 件 : 项 栏 


我 们 的 第 一 个 组 件 是 项 栏 ， 它 位 于 页 面 顶 部 。 顶 栏 两 边 显 示 玩 家 的 姓名 ， 中 间 显 示 回 合 数 ， 
并 用 箭头 指向 在 当前 回合 行动 的 玩家 姓名 。 


顶 栏 如 下 图 所 示 。 








Anne of Cleves William the Bald 





De y -EE 





1. 添加 一 些 游戏 数据 到 state 中 
在 创建 组 件 之 前 ， 需 要 添加 一 些 新 的 数据 属性 。 


口 turn: 当前 回合 数 ， 从 1 开始 计数 
口 players: 玩家 对 象 的 数组 
口 currentPlayerIndex: 当前 玩家 在 players 数组 中 的 索引 


将 上 面 这 些 属性 添加 到 statejs 文件 的 state 中 


// 应 用 状态 集合 
Var state = { 
// 世界 
worldRatio: getWorldRatio(), 
// 游戏 
Curne -1 
players: |[ 
{ 











name: 'Anne of Cleves', 
ks 
{ 
name: 'William the Bald', 
3 
]， 
currentPlayerIindex: Math.rounada(Math.randqom() ) ， 


} 


Dh Math.round (Math.random()) 方 法 将 随机 使 用 0 或 1 来 决定 谁 先 行动 。 
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我 们 将 使 用 这 些 属性 将 玩家 姓名 和 回合 数 显示 在 项 栏 中 。 
2. 定义 和 使 用 组 件 
我 们 将 在 新 的 文件 中 定义 UI 组 件 。 


(1) 创建 一 个 components 文件 夹 ， 并 在 里 面 创 建 一 个 新 的 uijs 文件 。 然 后 在 index.html 中 引 
用 这 个 uijs 文件 (位 于 引用 main.js 的 script 之 前 ): 

<1-- 脚本 --> 

Griot Stos Utley S/TDt 

<SCript sres "oarderis" Se/ eript 

<script src="state.js"></script> 

<script src="components/ui.js"></script> 

SSCript Sreos mar I /ript 


我 们 将 在 这 个 文件 中 对 组 件 进行 注册 ,所 以 主 Vue 实例 应 该 在 引入 它 之 后 创建 ,而 不 是 之 前 。 
否则 ， 会 提示 找 不 到 组 件 。 


可 以 使 用 全 局 函数 Vue .component () 来 注册 组 件 。 该 函数 接收 两 个 参数 : 一 个 是 注册 组 件 
的 名 称 ， 另 一 个 则 是 组 件 的 定义 对 象 本 身 ， 它 与 Vue 实例 使 用 相同 的 选项 。 
(2) 下 面 在 uijs 中 创建 top-bar 组 件 : 


Vue .component ('top-bar', { 
template: “<div class="top-bar"> 
Top bar 
< /LVS 了 


}) 


现在 可 以 在 模板 中 使 用 top-bar 组 件 了 ， 用 法 跟 使 用 其 他 HTML 标签 一 样 ， 例 如 
<top-bar>o 
(3) 在 主 模板 中 ， 添 加 一 个 新 的 top-bar 标签 : 


new Vue ({ 


LL 
























































template: “<div id="#app"> 
<top-bar/> 
</div>., 


}) 


模板 将 会 使 用 我 们 刚刚 定义 的 定义 对 象 创建 一 个 新 的 top-bar 组 件 ,并 将 其 演 染 到 #app 元 
素 内 部 。 如 果 现 在 打开 开发 者 工具 的 话 ， 可 以 看 到 两 个 实体 。 
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[x 0] Elements Console Vue Sources Network Timeline Profiles » to 





Vv Ready. Detected Vue 2.1.8. 人 的 内 二 


QQ Filter components 


v <Game 


TopBar Select a component instance to inspect. 








每 个 实体 都 是 一 个 Vue 实例 。 实 际 上 ，Vue 利用 我 们 为 top-par 组 件 提供 的 定义 创建 出 了 
第 二 个 实例 。 


3. 使 用 prop 进行 父 组 件 到 子 组 件 的 通信 


在 3.3.3 节 中 ,我 们 已 经 看 到 基于 组 件 的 应 用 有 一 棵 组 件 树 ， 现 在 则 需要 让 各 个 组 件 之 间 相 
互通 信 。 我 们 目前 只 关注 父 组 件 到 子 组 件 的 通信 。 这 一 过 程 是 通过 prop 来 完成 的 。 
top-bar 组 件 需要 知道 有 哪些 玩家 ， 当 前 行动 的 玩家 是 谁 ， 以 及 当前 回合 数 。 所 以 这 里 需 


要 3 个 prop: players、currentPlayerIndex 和 turn。 


利用 props 选项 可 以 将 prop 添加 到 组 件 的 定义 中 ,现在 ,我 们 只 是 简单 地 列 出 prop 的 名 字 。 
不 过 你 应 该 知道 ， 不 只 可 以 用 简单 的 数组 ， 还 可 以 用 对 象 来 代替 。 随 后 几 章 将 介绍 相关 内 容 。 


(1) 将 prop 添加 到 组 件 中 : 
Vue.component ('top-bar', { 
A 
props: ['players', 'currentPlayerIindex', 'turn'], 


] ) 
在 父 组 件 中 ， 也 就 是 根 应 用 中 ， 设 置 prop 值 的 方式 与 设置 HTML 属性 一 样 。 
(2) 在 主 模板 中 ， 使 用 v-bina 简写 语法 将 应 用 的 数据 绑 定 到 prop 值 上 。 


<top-bar :turn="turn" :current-player-index="currentPlayerIindex" 
:players="players" /> 
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注意 ， 由 于 HTML 是 不 区 分 大 小 写 的 ， 建 议 对 prop 的 名 字 使 用 短 横 线 命名 方法 
(kebab-case )， 而 在 JavaScript 代码 中 使 用 驼峰 式 命名 方法 (camel-case )。 














现在 ,在 top-bar 组 件 中 可 以 使 用 prop 了 ， 用 法 跟 使 用 数据 属性 一 样 。 例 如 ， 可 以 像 下 面 
这 样 写 一 些 代码 : 


Vue.component ('top-bar', { 
Yes 
created() { 
console.log(this.players) 
} 
} 


上 面 的 代码 会 在 浏览 器 控制 台 打 印 出 从 父 组 件 〈 应 用 ) 传递 过 来 的 players 数组 。 





4. 模板 中 的 prop 
下 面 在 top-bar 组 件 的 模板 中 使 用 prop。 
(1) 修改 top-bar 模板 ， 通 过 players prop 显示 玩家 姓名 。 





template: “<div class="top-bar"> 
<div class="player p0">{{ players[0] .name }}</div> 
<div class="player pl">{{ players[l1] .name }}</div> 


/LV 
从 上 面 的 代码 可 以 看 出 ,在 模板 中 ，prop 的 使 用 方法 与 属性 一 样 。 现 在 ， 可 以 看 到 应 用 中 显 
示 了 玩家 的 姓名 。 


(2) 接着 使 用 turn prop 在 玩家 之 间 显 示 回 合 数 : 


template: “<div class="top-bar"> 
<div class="player p0">{{ players[0] .name }}</div> 
<div class="turn-counter"> 
<div class="turn">Turn {{ turn }}</div> 
</div> 
<div class="player pl">{{ players[l] .name }}</div> 


/ALVS > 
另外 ， 我 们 还 希望 显示 一 个 大 的 箭头 ， 用 来 醒目 地 指出 当前 玩家 。 
(3) 在 .turn-counter 元 素 中 添加 一 个 箭头 图 像 ,并 利用 v-ping 简写 语法 (第 2 章 中 介 


过 ) 结 信 合 合 currentPlayerIndex prop 添加 一 个 动态 类 。 


囊 [ 














template: ‘<div class="top-bar" :class="'player-' + 
currentPlayerIindex"> 
<div class="player p0">{{ players[0] .name }}</div> 
<div class="turn-counter"> 
<img class="arrow" src="svg/turn.svg" /> 
<div class="turn">Turn {{ turn }}</div> 
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</div> 
<div class="player pl">{{ players[1] .name }}</div> 
</div>., 
至 此 , 应 用 顶 栏 的 功能 已 经 开发 完成 : 显示 两 个 玩家 姓名 , 并 在 中 间 显 示 游 戏 当前 的 回合 数 。 
可 以 在 浏览 器 控制 台 输 入 下 面 的 命令 ， 测 试 一 下 Vue 的 自动 响应 功能 : 


State.CurtrentP1ayerIndqex = 1 
State.CurtrentPlayerIndex = 0 


现在 你 可 以 看 到 箭头 能 够 指向 正确 的 玩家 。 








Anne of Cleves William the Bald 





[x 划 ] 
© 定 top v Preservelog 


> state.currentPlayerIndex = 1 
《 卫 
> | 
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3.4.2 ”显示 卡 牌 


所 有 卡 牌 的 描述 都 在 卡 牌 定义 对 象 中 ,在 cards.js 文件 里 声明 。 你 可 以 打开 它 ， 但 是 不 要 修 
改 里 面 的 内 容 。 每 张 卡 牌 都 定义 了 如 下 字段 。 


口 id: 卡 牌 的 唯一 标识 符 

D type: 修改 卡 牌 背景 颜色 ， 以 便 区 分 

口 title: 显示 卡 牌 的 名 字 

口 aescription: 一 段 HTML 文本 ， 用 于 说 明 卡 牌 的 作用 
口 note: 一 段 可 选 的 背景 叙述 ， 同 样 是 HTML 文本 

口 blay: 当 玩 家 出 牌 之 后 ， 会 调用 这 个 函数 


我 们 需要 用 一 个 新 的 组 件 来 (或 在 玩家 手 牌 列表 中 ,或 在 浮 层 中 ) 显示 对 手 在 上 一 回合 出 的 
牌 。 它 看 起 来 是 这 样 的 。 
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Description 


Note/Flavor text 








(1) 在 components/uijs 文件 中 ， 创 建 一 个 新 的 cara 组 件 : 本 三 
Vue .component ('card', { 
// 在 这 里 定义 


}) 


(2) 这 个 组 件 接收 一 个 aef prop， 这 是 卡 牌 的 定义 对 象 。 使 用 props 选项 来 声明 即 可 ， 跟 之 
前 为 top-par 组 件 所 做 的 类 似 : 


Vue.component ('card', { 
props: ['def'], 
} 


(3) 现在 ， 我 们 开始 添加 模板 内 容 。 以 div 元 素 开 始 ， 其 class 为 card: 


Vue.component ('card', { 
template: “<div class="card"> 
</div>., 
props: ['def'], 

} 








(4) 为 了 能 够 根据 卡 牌 的 类 型 显示 不 同 的 背景 色 ， 需 要 结合 卡 牌 对 象 的 type 属性， 添加 一 
个 动态 CSS 类 








<div class="card" :class="'type-' + def.type"> 




















例如 ， 如 果 卡 牌 的 类 型 是 attack， 元 素 将 有 一 个 type-attack CSS 类 ， 背 景色 是 红色 。 
(5) 现在 ， 用 相应 的 类 添加 卡 牌 的 标题 : 


<div class="card" :class="'type-' + def.type"> 
<div class="title">{{ def.title }}</div> 
</div> 





(6) 添加 分 隔 符 图 像 ， 即 在 卡 牌 标题 和 描述 之 间 显 示 一 些 线 条 : 


<div class="title">{{ def.title }}</div> 
<img class="separator" src="svg/card-separator.svg" /> 
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在 图 像 下 面 ， 添 加 描述 元 素 。 


注意 ， 由 于 卡 牌 对 象 的 description 属性 是 一 段 HTML 格式 的 文本 内 容 ， 需 


要 使 用 第 2 章 介绍 的 特殊 指令 v-html。 


(7) 使 用 v- 


html 指令 显示 描述 的 内 容 : 


<div class="description"><div v-html="def.description"></div> 


</div> 


你 
将 包 


(8) 最 后 ， 


可 能 已 经 注意 到 了 ， mit me div 元 素 ， 其 中 
包含 卡 牌 的 描述 文本 。 这 里 使 用 CSS 的 flexbox 对 文本 做 了 垂直 居中 效果 。 





添加 卡 牌 的 注释 〈 同样 是 一 段 HTML 文本 内 容 )。 注 意 ， 有 些 卡 牌 没 有 注释 ， 


需要 使 用 v-if 指令 : 


<div class="note" v-if="def.note"><div v-html="def.note"></div> </div> 
卡 牌 组 件 目前 看 起 来 是 这 样 的 : 


Vue.component ('card', { 
Droper [defe]'y 
template: “<div class="card" :class="'type-' + def.type"> 
<div class="title">{{ def.title }}</div> 
<img class="separator" src="svg/card-separator.svg" /> 
<div class="description"><diyv V- 
html="def.description"></div></div> 
<div class="note" v-if="def.note"><diyv V- 
html="def.note"></div></div> 
Ga 直 


}) 


现在 ， 可 以 在 主 应 用 组 件 中 使 用 新 的 cara 组 件 了 。 
(9) 编辑 主 模板 ， 在 顶 栏 下 面 添加 一 个 card 组 件 ， 如 下 所 示 : 














template: 
<top-bar 
1d ex 
<card :d 
/LV 


(10) 这 里 需 


computed : 
testCard 
return 
9 
二 


<div id="#app"> 

:turn="turn™" :current-player- 
currentPlayerIindex" :players="players" /> 
ef="testCard" /> 





要 定义 一 个 临时 的 计算 属性 : 


{ 
人 


cards.archers 


所 
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现在 ， 可 以 看 到 界面 中 显示 出 了 一 张 红 色 的 攻击 卡 牌 ， 内 容 包 括 标题 、 描 述 和 背景 叙述 。 





Archers 
@ 


3 


Deal 3 Damage= 


«Ready your bows! Nock! 
Mark! Draw! Loose!» 





1. 在 组 件 上 监听 原生 事件 
下 面 给 卡 牌 添加 一 个 单 击 事件 处 理 函数 : 


<card :def="testCard" @click="handlePlay" /> 
在 主 组 件 中 ， 添 加 一 个 简单 的 方法 : 
methods: { 
handlePlay() { 
console.log('You played a card!') 


} 
} 


如 果 在 浏览 器 中 运行 上 面 的 代码 ,会 发 现 它 并 不 能 像 预 期 的 那样 生效 , 控制 台 没 有 任何 输出 。 

这 是 因为 Vue 针对 组 件 有 自己 的 事件 系统 ， 叫 作 “ 自 定义 事件 ”， 一 会 我 们 将 介绍 。 这 套 系 
统 有 别 于 浏览 避 事 件 ， 在 这 里 Vue 期 望 的 是 一 个 自 定 义 的 click 事件 ， 而 不 是 浏览 器 事件 。 
此 ，handler 方法 不 会 被 调用 。 

为 监听 到 组 件 的 click 事件 ， 需 要 对 v-on 指令 使 用 .native 修饰 符 ， 如 下 所 示 : 

<card :def="testCard" @click.native="handlePlay" /> 

这 样 ， 当 单 击 卡 牌 时 ，nandlePlay 才 会 如 期 望 的 那样 被 调用 。 

2. 使 用 自 定义 事件 进行 子 组 件 到 父 组件 的 通信 


之 前 介绍 过 使 用 prop 实现 从 父 组 件 到 子 组 件 的 通信 。 现 在 ， 我 们 希望 子 组 件 能 反 过 来 与 父 
组 件 通信 。 对 于 carq 组 件 , 我 们 希望 当 玩家 单 击 卡 牌 时 可 以 告知 父 组 件 , 此 卡 牌 已 经 被 使 用 了 。 
在 这 里 ， 我 们 不 能 使 用 prop ， 而 是 要 使 用 自 定义 事件 。 在 组 件 内 部 ， 使 用 $emit 这 个 特殊 方法 
触发 的 事件 可 以 被 父 组 件 捕获 到 。 该 方法 接收 一 个 固定 的 参数 ， 即 事件 类 型 : 


this.$emit('play') 




































































56 第 3 章 项 目 2: 城堡 决斗 游戏 








在 同一 个 Vue 实例 中 ， 可 以 使 用 名 为 son 的 特殊 方法 监听 自 定义 事件 : 
this.$on('play', () => { 


console.log('Caught a play event!') 
}) 


同时 ，semit 方法 还 会 触发 一 个 play 事件 到 父 组 件 中 。 可 以 在 父 组 件 模板 里 使 用 v-on 指 
令 监 听 该 事件 : 

<card Vv-on:play="handlePlay" /> 
也 可 以 使 用 v-bina 的 简写 : 

<card @play="handlePlay" /> 

调用 semit 方法 触发 事件 时 ， 还 可 以 添加 一 些 参数 传递 到 处理 函数 的 方法 中 : 

this.semit ('play', 'orange', 42) 

上 面 的 代码 中 触发 了 一 个 play 事件 ， 并 传递 了 两 个 参数 : 'orange' 和 42。 

在 处 理 函 数 中 可 以 通过 参数 获取 到 传递 过 来 的 内 容 ， 如 下 所 示 : 


handlePlay (color, number) { 
console.log('handle play event', 'color=', color, 'number=', number) 


} 
参数 color 的 值 将 是 'orange' ， 而 number 的 值 则 为 42。 


























与 上 一 节 描 述 的 一 样 ，Vue 的 自 定义 事件 与 浏览 器 事件 系统 是 完全 分 开 的 。 方法 
和 son 和 semit 并 不 是 addEventListener 和 dispatchEvent 的 别名 。 这 也 解 
释 了 为 什么 在 组 件 中 需要 使 用 .native 修饰 符 来 监听 浏览 器 事件 (如 click )。 

回 到 cara 组 件 中 ， 我 们 需要 触发 一 个 简单 的 事件 ， 告 知 父 组 件 已 经 使 用 了 这 张 卡 牌 。 


(1) 首先， 添加 一 个 方法 用 于 事件 的 触发 : 


methods: { 
play() { 
this.semit('play') 
下 
} 


(2) 我 们 希望 当 用 户 单 击 卡 牌 时 能 调用 该 方法 。 只 需要 在 卡 牌 的 主 aiv 元 素 上 监听 浏览 器 的 
单 击 事件 即 可 : 

<div class="card" :class="'type-' + def.type" @click="play"> 

(3) 到 这 里 , 我 们 的 cara 组 件 就 完成 了 。 通 过 在 主 组 件 模 板 中 监听 play 自 定 义 事件 ， 可 以 
测试 cara 组 件 : 
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<card :def="testCard" @play="handlePlay" /> 








这 样 ， 只 要 触发 了 play 事件 ，nandlePlay 方法 就 将 被 调用 。 
我 们 可 以 只 监听 原生 的 单 击 事件 , 但 是 在 大 多 数 情况 下 , 最 好 使 用 自 定义 事件 完 
3 成 组 件 之 间 的 通信 。 例如， 当 用 户 使 用 其 他 方式 (例如 使 用 键盘 选中 卡 牌 ,然后 
按 回 车 键 ) 玩 游戏 时 ,我们 也 可 以 触发 play 事件 ， 但 本 书 不 会 实现 这 种 方式 。 


3.4.3” 手 牌 





下 一 个 组 件 是 当前 玩家 的 手 牌 ， 用 于 存放 现 有 的 5 张 卡 牌 。 该 组 件 有 3D 过 渡 效 果 ， 并 且 负 
责 展示 卡 牌 的 动画 〈 当 摸 牌 和 出 牌 时 )。 








(1) 在 components/ui.js 文件 中 添加 一 个 组 件 , 以 hanaqID 注册 ,并 编写 一 个 包含 两 个 div 元 
素 的 基本 模板 : 


Vue .component ('hand', { 
template: “<div class="hand"> 
<div class="wrapper"> 
<!1-- 卡 牌 --> 
</div> 
</div>., 


} 


0 wrapper 元 素 用 于 定位 卡 牌 和 实现 卡 牌 的 动画 效果 。 


手 牌 中 的 每 张 卡 牌 都 由 一 个 对 象 表示 。 现 在 ,这些 对 象 有 如 下 属性 。 


口 ia: 卡 牌 唯一 标示 符 
口 def: 卡 牌 定义 对 象 








Ce 提醒 一 下 ， 所 有 卡 牌 的 定义 都 在 cards.js 文件 中 声明 。 

















(2) 我 们 的 nana 组 件 会 通过 一 个 名 为 cargs 的 新 prop 数组 接收 卡 牌 对 象 , 以 此 来 表示 玩家 
的 手 牌 : 


Vue.component ('hand', { 
As 
props: | "ecarde.], 

} 





(3) 现在 可 以 使 用 v-for 指令 添加 cara 组 件 了 : 
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<div class="wrapper"> 
<Card v-for="card of cards" :def="card.def" /> 
</div> 





(4) 为 了 测试 hang 组件， 在 应 用 的 state 中 创建 一 个 名 为 testHang 的 临时 属性 ( state.js 文 
件 中 ); 
var state = { 


Yr i 
testHand: [], 





Ee 
| 





} 


(5) 在 主 组 件 中 添加 一 个 createTestHand 方法 (main.js 文件 中 ): 


methods: { 
createTestHand() { 
const cards = [] 
// 遍历 获取 卡 牌 的 ia 


const ids = Object.keys (cards) 


// 抽取 5 张 卡 牌 

for (let i = 0; i < 5; i++) { 
cards.push (testDrawCard()) 

} 


return cards 
} 
}y 


(6) 为 了 测试 hang 组件， 还 需要 一 个 临时 方法 testDrawcara 模拟 卡 牌 的 随机 抽取 : 


methods: { 
J A 
testDrawCard() { 
// 使 用 id 随机 选取 一 张 卡 牌 
const ids = Object.keys (cards) 
const randomId = ids[Math.floor(Math.random() * ids.length)] 
// 返回 一 张 新 的 卡 牌 
return { 
// 卡 牌 的 唯一 标识 符 
uid: cardUid++, 
// 定义 的 id 
id: randqomId， 
// 定义 对 象 
def: cards[randomId], 
} 
} 


(7) 使 用 Vue 的 生命 周期 钩子 created 初始 化 hand; 


created() { 
this.testHand = this.createTestHand() 
} 
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cardUiqd 是 玩家 所 抽取 卡 牌 的 唯一 标识 符 ， 用 于 区 分 玩家 手中 的 卡 牌 。 使 用 
OQ- cardUiqd 人 分 主要 是 因为 多 张 卡 牌 可 以 有 相同 的 定义 ， 所 以 需要 一 种 能 够 


(8) 在 主 模板 中 ， 添 加 hang 组 件 : 


template: “<div id="#app"> 
<top-bar :turn="turn" :current-player- 
index="currentPlayerIindex" :players="players" /> 
<hand :cards="testHand" /> 
/ALY 


最 终 ， 在 浏览 希 中 看 到 的 效果 应 该 是 这 样 的 。 





Knighthood Granary Quick Repair Pikemen 
@ @ @ @ 


央 
a Food te a : Spend 1 Food 关 
eal 5 Damage 二 epair 3 Damage 二 4 i 
9 Gather 2 Food# p 9 Deal 1 Damage~ Repair 5 Damage 
Skip your next turn 
Knights may be even This is not without 


more expansive than consequences on the Send your disposable 
their mount. moral and energy! men to a certain death. 

















1. hand 组 件 的 动画 过 渡 效 果 


在 玩 游戏 期 间 ， 当 显示 浮 层 时 ， 手 牌 将 被 隐藏 起 来 。 为 了 让 应 用 更 好 看 ， 当 把 hang 添加 到 
DOM 中 或 移 除 它 时 ， 我 们 对 其 添加 动画 效果 。 为 此 ， 这 里 使 用 CSS 过 渡 ， 并 结合 使 用 强大 的 
Vue 工 具 : 特殊 的 <transition> 组 件 。 当 添加 或 移 除 元 素 时 ， 使 用 v-if 或 v-show 指令 来 帮 
助 实现 CSS 过 渡 。 


(1) 首先 ， 在 statejjs 文件 中 添加 一 个 新 的 activeoverlay 数据 属性 到 应 用 state 中 : 
// 应 用 状态 集合 


Var state = { 
// 用 户 界面 
activeOverlay: null, 
A 

} 


(2) 在 主 模板 中 ， 只 有 当 activeoverlay 没有 定义 的 时 候 ， 才 显示 hana 组 件 。 只 要 使 用 
v-if 指令 即 可 做 到 ; 


<hand :cards="testHand" v-if="!activeOverlay" /> 


(3) 现在 ， 只 要 在 浏览 器 控制 台 将 state.activeoverlay 修改 为 任意 的 真 值 ，hana 组 件 
就 会 被 隐藏 起 来 : 
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state.activeOverlay = 'player-turn’' 


(4) 同样 ， 如 果 将 state.activeoverlay 设置 回 null， 手 牌 将 重新 显示 出 来 : 


state.activeOverlay = null 

















(5) 如 果 要 在 通过 v-if 或 v-show 添加 或 移 除 某 个 组 件 时 实现 过 渡 效 果 ， 可 以 用 














<transition> 组 件 将 其 包 庄 住 ， 如 下 所 示 : 


<transition> 
<hand v-if="!activeOverlay" /> 
</transition> 


注意 ， 这 对 于 HTML 元 素 同 样 有 效 : 


<transition> 
<h1 v-if="showTitle">Title</hl> 
</transition> 


& <transition> 特 殊 组 件 不 会 显示 在 DOM 中 ， 就 像 在 第 2 章 中 使 用 的 <template> 
标签 一 样 。 


当 元 素 被 添加 到 DOM 时 (进入 阶段 )，<transition> 组 件 会 自动 将 下 列 CSS 类 应 月 


素 中 。 





日 到 元 


口 v-enter-active: 当 进 入 过 滤 状 态 被 激活 时 ， 会 应 用 该 类 。 在 元 素 搬入 DOM 之 前 ， 添 
加 该 类 到 元 素 中 ， 并 在 动画 结束 时 移 除 它 。 应 该 在 这 个 类 中 添加 一 些 transition CSS 


属性 并 定义 其 过 渡 时 长 。 





元 素 被 插入 的 下 一 帧 移 除 。 例 如 ， 你 可 以 在 这 个 类 中 设置 透明 度 为 0。 








v-enter 被 移 除 。 当 动画 完成 后 ，v-enter-to 会 被 移 除 。 


口 v-enter: 元 素 进入 过 渡 的 开始 状态 。 在 元 素 插入 DOM 之 前 , 添加 该 类 到 元 素 中 ， 并 在 


口 v-enter-to: 元 素 进 入 过 渡 的 结束 状态 。 在 元 素 搬 入 DOM 后 的 下 一 帧 添加 ， 同 时 


当 元 素 从 DOM 中 移 除 时 ( 离开 阶段 )，<transition> 组 件 会 自动 将 下 列 CSS 类 应 用 到 元 


素 中 。 


口 v-leave-active: 当 离开 过 渡 状 态 被 激活 时 ， 会 应 用 该 类 。 当 离开 过 渡 触 发 时 ， 添 加 
该 类 到 元 素 中 ,并 在 从 DOM 中 移 除 元 素 时 移 除 它 。 应 该 在 这 个 类 中 添加 一 些 transition 





CSS 属性 并 定义 其 过 渡 时 长 。 








一 帧 移 除 。 








被 移 除 。 当 从 DOM 中 移 除 元 素 时 ， 该 类 也 会 被 移 除 。 


口 v-leave: 元 素 被 移 除 时 的 开始 状态 。 当 离开 过 渡 触 发 时 ， 添 加 该 类 到 元 素 中 ， 并 在 下 


口 v-leave-to: 元 素 离 开 过 渡 的 结束 状态 ,在 离开 过 渡 触 发 后 的 下 一 帧 添加 ,同时 v-leave 
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在 离开 阶段 ， 并 不 会 立即 从 DOM 中 移 除 元 素 。 当 过 渡 结 束 后 ， 才 会 将 其 移 除 ， 
这 样 用 户 可 以 看 到 动画 效果 。 


下 图 总 结 了 元 素 的 进入 和 离开 这 两 种 过 渡 阶 段 ， 标 明了 相应 的 CSS 类 。 





透明 度 : 0 透明 度 : 1 透明 度 : 1 透明 度 : 0 


V-enter V-enter-to Vv-leave v-leave-to 




















T T 
V-enter-active Vv-leave-active 











6 <transition> 组 件 会 自动 检测 应 用 在 元 素 上 的 CSS 过 渡 效 果 的 持续 时 间 。 





(6) 我 们 需要 写 一 些 CSS 完成 动画 效果 。 创 建 一 个 新 的 文件 transition.css， 并 在 Web 页 面 中 
包含 它 : 


<link rel="stylesheet" href="transitions.css" /> 


先 写 一 个 基本 的 淡出 动画 效果 。 我 们 希望 将 CSS 过 渡 效 果 应 用 到 CSS 的 opacity 属性 上 ， 
持续 时 间 为 1 秒 。 


(7) 为 此 ， 需 要 使 用 v-enter-active 和 v-leave-active 两 个 CSS 类 ， 因 为 元 素 有 相同 
的 动画 : 


.hand.v-enter-active, 
.hand.v-leave-active { 
transition: opacity 1s; 


} 











当 hand 组 件 被 添加 到 DOM 或 是 从 DOM 中 移 除 时 ,我 们 希望 它 的 opacity 为 0( 全 透明 
效果 )。 


(8) 使 用 v-enter 和 v-leave-to 类 来 应 用 这 一 全 透明 效果 : 





62 第 3 章 项 目 2: 城堡 决斗 游戏 





.hand.v-enter, 

.hand.v-leave-to { 
opacity: 0; 

} 


(9) 回 到 主 模板 中 ,将 hang 组 件 包 庄 到 一 个 <transition> 组 件 中 : 


<transition> 
<hand v-if="!activeOverlay" :cards="testHand" /> 
</transition> 


至 此 ， 当 隐藏 或 显示 手 牌 时 ， 会 有 淡 入 和 淡出 的 效果 。 
(10) 由 于 可 能 需要 复 用 这 个 动画 ， 我 们 可 以 给 它 取 个 名 字 : 


<transition name="fade"> 
<hangd v-if="!activeOverlay" :cards="testHand" /> 
</transition> 








由 于 Vue 现在 要 使 用 face-enter-active 替换 v-enter-active， 所 以 需要 修改 我 们 的 
CSS 类 。 


(11) 在 transition.css 文件 中 ， 修 改 CSS 选择 器 : 


.fade-enter-active, 
.fade-leave-active { 
transition: opacity 1s; 


} 


.fade-enter, 
.fade-leave-to { 
opacity: 0; 

} 








现在 ， 我 们 只 需要 通过 <transition name="fade"> 标 签 就 可 以 在 任意 元 素 上 复 用 这 个 动 
画 了 。 


2. 更 好 看 的 动画 


现在 我 们 来 看 看 如 何 使 用 一 些 3D 效果 制作 出 更 加 复杂 和 漂亮 的 动画 。 除 了 手 牌 ， 我 们 还 将 
对 .wrappez 元 素 (用 于 3D 翻转 效果 ) 和 .card 元 素 添 加 动画 效果 。 一 开始 ， 牌 会 堆 成 一 堆 ， 
然后 各 自 渐 渐 移 动 到 一 定 的 位 置 。 最 后 还 会 实现 一 个 动画 效果 , 就 好 像 玩 家 在 从 桌面 上 摸 牌 一 人 


(1) 利用 hana 替换 fage 创建 一 个 新 的 CSS 过 渡 类 : 


.hand-enter-active, 
.hand-leave-active { 
transition: opacity .5s; 


} 











TT 








oO 
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.hand-enter, 
.hand-leave-to { 


opacity: 0; 
} 


(2) 在 主 模板 中 ， 修 改过 渡 的 名 字 : 


<transition name="hand"> 
<hand v-if="!activeOverlay" 


</transition> 
(3) 对 wrapper 元 素 添加 动画 效果 。 使 用 CSS 的 transform 属性 ， 将 3D 变换 效果 应 用 到 


元 素 中 : 


.hand-enter-active 
.hand-leave-active .wrapper { 

transition: transform .8s cubic-bezier(.08,.74,.34,1); 
transform-origin: bottom center; 


} 


:cards="testHand" /> 








.hand-enter .wrapper, 
.hand-leave-to .wrapper { 


transform: rotatex(90deg); 





} 
正确 的 旋转 轴 应 该 为 水 平 轴 ， 也 就 是 x。 这 样 ， 当 玩家 摸 牌 时 ， 将 看 到 相应 的 动画 效果 。 注 


次 贝 塞 尔 曲线 (cubic-bezier ) 缓 动 函 数 ， 可 以 使 得 动画 更 加 平滑 。 
































意 这 里 用 到 了 三 
(4) 最 后 ， 给 卡 牌 设置 一 个 负 的 水 平 边 距 ， 这 样 卡 牌 看 起 来 就 像 是 堆 在 一 起 的 : 
.hand-enter-active .Card， 
.hand-leave-active .Cardq { 
74,.34,1); 


transition: margin .8s cubic-bezier(.08,. 


} 

.hand-enter .card, 

.hand-leave-to .card { 
margin: 0 -100px; 


} 
至 此 , 如 果 通 过 浏览 器 控制 台 


3. 出 牌 


现在 ， 我 们 需要 在 hand 乡 
card-play 事件 给 主 组 件 ， 该 事件 携 


看 到 一 个 很 不 错 的 动画 效果 。 








测试 nana 组 件 的 隐藏 和 显示 ,将 会 




















组 件 中 处 理 用 户 单 击 卡 牌 时 触发 的 play 事件 ， 并 触发 一 个 新 的 
带 一 个 额外 的 参数 : 被 单 击 的 卡 牌 。 


新 的 方法 nandlePlay。 该 方法 接收 一 个 cara 参数 , 并 











(1) 首先 , 在 hang 组 件 中 创建 一 个 于 
触发 新 的 事件 到 父 组 件 中 : 
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methods: { 
handlePlay (card) { 
this.s$emit('card-play', card) 
和 
} 


(2) 然后 ， 监 听 卡 牌 的 play 事件 : 


<Card v-for="card of cards" :def="card.def" 
@play="handlePlay (card) /> 


如 上 所 示 ， 直 接 使 用 v-for 循环 的 迭代 变量 card。 由 于 我 们 已 经 知道 card 是 
什么 了 ， 所 以 并 不 需要 card 组 件 告 知 我 们 。 


为 了 测试 出 牌 ， 我 们 现在 只 需要 将 卡 牌 从 手 牌 中 移 除 即 可 。 
(3) 在 mainjs 文件 的 主 组 件 中 创建 一 个 新 的 临时 方法 kestPlayCard: 


methods: { 
ee 
testPlayCard(card) { 
// 将 卡 牌 从 玩家 手 牌 中 移 除 即 可 
const index = this.testHand.indexOof (card) 
this.testHand.splice(index, 1) 
} 
二 


(4) 在 主 模板 中 添加 事件 监听 器 ， 监 听 nangd 组 件 的 card-play 事件 : 


<hand v-if="!activeOverlay" :cards="testHand" @card-play="testPlayCard" /> 


现在 ， 如 果 单 击 卡 牌 ， 卡 牌 将 触发 一 个 play 事件 到 hang 组 件 中 ， 接 着 nana 组 件 将 触发 
一 个 card-play 事件 到 主 组 件 中 。 这 会 反 过 来 移 除 手 牌 中 的 卡 牌 ,使 其 消失 。 为 了 方便 调试 这 
一 类 使 用 情形 ， 浏 览 器 的 开发 者 工具 有 一 个 Events 选项 卡 。 








Vv Ready. Detected Vue 2.2.1 人 Components 如 Vuex * Events {£3 Refresh 
Q Filterevents © Clear 得 Recording name: "play" 

type: "Semit™ 
card-play $emit by <Hand source: "<Card>" 


有 v payload: Array[9] 
play $emit by <Card> 82:55:31 











4. 手 牌 列表 的 动画 


我 们 的 手 牌 列表 还 有 3 个 动画 要 实现 : 卡 牌 被 添加 到 玩家 手 牌 中 ， 卡 牌 从 手 牌 中 移 除 ， 以 及 
卡 牌 的 移动 。 当 回合 开始 时 ， 玩 家 摸 一 张 牌 。 这 意味 着 要 在 手 牌 中 添加 一 张 卡 牌 ， 这 张 卡 牌 将 从 
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右边 划 入 手 牌 中 。 当 玩家 出 牌 时 ， 我 们 希望 这 张 卡 牌 升 起 并 放大 。 


为 元 素 列表 添加 动画 效果 ， 需 要 使 用 另外 一 个 特殊 的 组 件 <transition-group>。 当 元 素 
被 添加 、 移 除 和 移动 时 ， 该 组 件 将 对 它 的 子 元 素 做 出 动画 效果 。 在 模板 中 ， 看 起 来 是 这 样 的 : 


<transition-group> 
<div v-for="item of items" /> 
</transition-group> 


跟 <transition> 元 素 不 同 的 是 ， <transition-group> 默 认 情 况 下 会 作为 <span> 元 素 出 
现在 DOM 中 。 你 可 以 使 用 tag prop 修改 这 个 HTML 元 素 : 


























<transition-group tag="ul"> 
<11 v-for="item of items" /> 
</transition-group> 


在 nang 组 件 的 模板 中 , 使 用 <transition-group> 将 card 组 件 包围 起 来 ,并 指定 过 渡 效 
果 的 名 称 为 carda， 再 添加 一 个 cards CSS 类 : 


<transition-group name="card" tag="div" class="cards"> 
<Cardq v-for="card of cards" :def="card.def" @play="handlePlay (card) /> 
</transition-group> 
在 继续 之 前 ， 这 里 遗漏 了 一 件 很 重要 的 事情 : <transition-group> 的 子 元 素 必须 由 唯一 
的 key 做 标识 。 


@ 特殊 的 key 属性 


当 Vue 更 新 存在 于 v-for 循环 中 的 DOM 元 素 列 表 时 ， 会 尽量 最 小 化 应 用 于 DOM 的 操作 ， 
例如 添加 或 移 除 元 素 。 大 多 数 情况 下 ， 这 是 更 新 DOM 的 一 种 非常 高 效 的 方法 ， 并 且 对 性 能 的 提 
升 也 有 帮助 。 


为 了 做 到 这 一 点 , Vue 会 尽 可 能 地 复 用 元 素 , 并 仅 对 DOM 中 需 修改 的 地 方 进行 小 范围 修改 ， 
以 达到 理想 的 结果 。 这 就 意味 着 重复 的 元 素 会 被 打包 到 一 起 , 不 会 在 添加 或 移 除 列表 中 的 项 时 移 
动 它们 。 不 过 ， 这 也 意味 着 对 其 应 用 过 湾 不 会 有 动画 效果 。 


下 面 是 Vue 的 复 用 原理 图 。 
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div 1 div 1 div 1 
a a a 

div 2 div 2 div 2 
b b b 

一 一 人 一 人 

div 3 div 3 div 3 
六 v d d 

div 4 
d 

在 上 图 中 ， 我 们 将 列表 中 的 第 三 项 c 移 除 了 。 但 是 第 三 个 div 元 素 不 会 被 销毁 ， 而 是 会 被 


列表 中 的 第 四 项 a 复 用 。 实 际 上 ， 被 销毁 的 








月 .全 


是 第 四 个 aiv 元 素 。 


好 在 可 以 告诉 Vue 每 个 元 素 是 如 何 被 识别 出 来 的 ,这 样 就 可 以 对 其 复 用 和 重新 排序 了 ,为 此 ， 
需要 用 特殊 的 key 属性 为 元 素 指定 唯一 标识 符 。 例 如 ,可 以 对 我 们 的 4 个 项 使 用 唯一 卫 作 为 key。 

















这 里 指定 了 key，Vue 就 知道 第 三 


个 aiv 元 素 应 该 被 销毁 ， 而 第 四 个 aiv 元 素 则 需要 移动 





位 置 。 
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key 这 一 特殊 属性 的 用 法 与 其 他 标准 属性 一 致 ， 所 以 如 果 想 要 对 其 动态 赋值 , 需 
要 使 用 Vv-bind 指令 。 
回 到 我 们 的 卡 牌 ， 可 以 使 用 卡 牌 的 唯一 ID 当 作 key。 


<Card v-for="card of cards" :def="card.def" :key="card.uid" 
@play="handlePlay (card) /> 


现在 ， 用 JavaScript 对 卡 牌 进行 添加 或 删除 操作 ， 在 DOM 中 的 卡 牌 会 被 正确 排序 。 
e@ CSS 过 渡 


与 之 前 类 似 ， 这 里 有 6 个 以 列表 过 渡 〈group transition ) 效果 名 称 card 为 前 绥 的 CSS 类 : 
card-enter-active、 card-enter, card-enter-to, card-leave-active、 card-leave 
和 card-leave-to。 这 些 类 将 被 应 用 到 列表 过 渡 效 果 的 直接 子 节点 中 ， 也 就 是 cards 组 件 。 

(1) 列表 过 渡 有 一 个 额外 的 类 v-move， 用 于 元 素 的 移动 。Vue 将 使 用 CSS 的 transform 属 
性 对 元 素 进 行 移动 ， 所 以 我 们 只 需要 应 用 一 个 CSS 过 渡 效 果 ， 并 至 少 带 上 一 个 过 渡 时 长 即 可 : 


.Card-move { 
transition: transform .3s; 


} 


现在 ， 当 单 击 卡 牌 进行 出 牌 时 ， 该 卡 牌 将 消失 ， 而 剩 下 的 卡 牌 将 被 移动 到 新 的 位 置 。 你 还 可 
以 添加 卡 牌 到 手 牌 中 。 


(2) 在 Vue 的 开发 者 工具 中 选中 主 组 件 ， 并 在 浏览 器 控制 台 执 行 如 下 命令 


state.testHand.push ($vm.testDrawCard()) 











6 在 开发 者 工具 中 选中 一 个 组 件 ， 该 组 件 会 以 Svm 的 形式 暴露 给 浏览 器 控制 台 。 





就 像 之 前 对 手 牌 的 处 理 一 样 ， 当 卡 牌 进入 手 牌 列表 以 及 出 牌 ( 也 就 是 离开 手 牌 列表 ) 时 ,我 
们 也 对 其 添加 动画 效果 。 


(3) 由 于 始终 需要 在 相同 的 时 间 对 卡 牌 的 多 个 CSS 属性 进行 过 渡 ( 除了 在 离开 过 渡 期 间 ), 所 
以 这 里 将 .card-move 规则 修改 为 : 
.Card { 
/* 用 于 进入 、 移 动 和 和 鼠标 悬 停 的 动画 */ 
transition: all .3 s; 


} 
(4) 针对 进入 动画 ， 指 定 卡 牌 开始 过 渡 时 的 状态 : 


.Card-enter { 
opacity: 0 
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/* 从 右边 划 入 */ 
transform: Scale(.8) translatex(100px); 


} 


(5) 由 于 出 牌 时 涉及 卡 牌 的 上 升 及 放大 效果 ， 动 画 要 复杂 一 点 ， 所 以 动画 需要 的 规则 也 多 
一 点 : 


.Card-leave-active { 
/* 离开 过 渡 的 时 间 不 同 */ 
transeition: dLl. Ter ODAaGLty S58 58 
/* 保持 水 平 位 置 不 变 */ 
position: absolute !important; 
/* 将 玩家 打出 的 卡 牌 绘制 于 其 他 卡 牌 之 上 */ 
z-index 10; 
/* 在 过 渡 期 间 不 允许 单 击 */ 
pointer-events: none; 


} 


.Card-leave-to { 

opacity: 0; 

/* 卡 牌 上 升 的 同时 放大 */ 

transform: translateXx(-106px) translateY(-300px) scale(1.5); 
} 


上 面 的 代码 可 以 满足 各 种 情况 下 的 卡 牌 动画 效果 了 。 现在 可 以 再 试 试 出 牌 和 添加 卡 牌 到 手 牌 
中 ， 并 观察 效果 。 








3.4.4 浮 层 
最 后 ， 我 们 还 需要 的 用 户 界 面 元 素 就 是 浮 层 (overlay )。 下 面 是 项 目 涉 及 的 三 个 浮 层 。 


口 当 轮 到 玩家 出 牌 时 ， new-turn 浮 层 将 显示 当前 回合 的 玩家 姓名 o 单 击 new-turn 浮 层 ， 
将 切换 到 last-play 浮 层 。 
口 last-play 浮 层 将 显示 对 手 之 前 的 行动 ， 分 为 以 下 两 种 情况 : 


上 一 回合 对 手打 出 的 卡 牌 ; 
ma 提醒 对 手 跳 过 了 自己 的 回合 。 
口 当 玩 家 (一 个 或 两 个 ) 失 败 时 , 将 显示 game-over 浮 层 , 其 内 容 为 玩家 姓名 和 is victorious 
或 is defeated。 单 击 game-over 浮 层 ,将 重新 加 载 游戏 。 
这 些 浮 层 具 有 两 个 共性 : 首先 ， 当 用 户 单 击 浮 层 时 ,它们 都 会 做 一 些 操作 ; 其 次 ,它们 的 布 
局 设计 基本 相同 。 因 此 ， 明 智 的 做 法 是 尽量 使 得 组 件 能 够 复 用 代码 。 在 此 ,我 们 将 构建 一 个 通用 
的 浮 层 组 件 ， 用 于 处 理 单 击 事件 、 页 面 布局 和 每 个 浮 层 所 需 的 3 个 特定 的 浮 层 内 容 组 件 。 


开始 之 前 ， 在 state.js 文件 中 添加 一 个 新 的 activeoverlay 属性 到 应 用 状态 : 
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// 应 用 状态 集合 

var State = { 
// 用 户 界面 
activeOverlay: null, 
en 

} 


activeOverlay 属性 将 保存 当前 显示 浮 层 的 名 称 ; 如 果 没 有 浮 层 显示 ， 则 为 nul1。 
1. 使 用 插 槽 分 发 内 容 
如 果 可 以 在 主 模板 中 将 内 容 添 加 到 overlay 组 件 里 ， 会 非常 方便 ， 类 似 于 这 样 : 


<overlay> 


<overlay-content-player-turn /> 
</overlay> 


我 们 将 把 额外 的 布局 和 逻辑 封装 到 overlay 组 件 中 ， 并 且 还 能 添加 任意 的 内 容 进 去 。 只 需 
要 使 用 特殊 的 <slot> 元 素 就 可 以 完成 这 个 功能 。 


(1) 创建 一 个 overlay 组 件 ， 并 添加 两 个 div 元 素 : 


Vue .component ('overlay', {{ 
template: “<div class="overlay"> 
<div class="content"> 
<!-- 这 里 是 插 楷 --> 
</div> 
</div>., 


}) 


(2) 在 .overlay 元 素 上 添加 一 个 单 击 事件 监 昕 器 ， 调 用 handleclick 方法 : 


<div class="overlay" @click="handleClick"> 


(3) 接着 添加 handleclick 方法 并 在 其 中 触发 一 个 自 定 义 事件 close: 


methods: { 
handleClick() { 
this.s$emit('close') 
} 
} 


这 个 事件 可 以 帮助 我 们 在 回合 开始 时 知晓 何 时 从 一 个 浮 层 切换 到 下 一 个 。 


(4) 在 .content 元 素 中 添加 一 个 <slot> 元 素 : 


template: ‘<div class="overlay" @click="handleClick"> 
<div class="content"> 
<slot /> 
</div> 


























</ ALYS; 
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现在 使 用 组 件 时 , 如 果 在 <overlay> 标 签 之 间 添 加 一 些 内 容 , 这 些 内 容 将 被 包含 在 DOM 中 ， 
并 替换 掉 <slot > 标签 。 例 如 ,我们 可 以 这 样 做 : 


<overlay> 
Hello world! 
</overlay> 


这 在 页 面 中 将 被 泻 染 为 : 


<div class="overlay"> 
<div class="content"> 
Hello world! 
</div> 
</div> 





人 还 可 以 在 标签 之 间 添 加 HTML 或 Vue 组 件 ， 工 作 原 理 是 一 样 的 。 





(5) 至 此 ， 组 件 已 经 可 以 在 主 模板 中 使 用 了 。 这 里 将 组 件 添 加 到 尾部 : 


<overlay> 
Hello world! 
</overlay> 


涉及 的 3 个 浮 层 内 容 将 被 分 为 3 个 独立 的 组 件 : 


口 overlay-content-player-turn 显示 游戏 回合 开始 的 相关 内 容 ; 
口 overlay-content-last-play 显示 对 手 上 一 回合 的 出 牌 信息 ; 
口 overlay-content-game-over 显示 游戏 结束 的 信息 。 


在 编写 这 3 个 组 件 之 前 ， 我 们 需要 在 state 中 增加 和 两 名 玩家 相关 的 一 些 数据 。 
(6) 回 到 statejs 文件 中 ， 为 每 名 玩家 添加 如 下 属性 : 


// 游戏 开始 时 的 状态 

food: 10, 

health: 10， 

// 是 否 跳 过 下 个 回合 
skipTurn: false, 

// 跳 过 了 上 个 回合 
skippedTurn: false, 
hand: [], 
lastPlayedCardId: null, 
dead: false, 


现在 players 数组 中 应 该 有 两 项 。 除 了 玩家 姓名 不 同 外 ， 这 两 项 的 其 他 属性 都 是 相同 的 。 























2. player-turn 浮 层 


第 一 个 浮 层 将 根据 是 否 跳 过 ， 向 当前 玩家 显示 两 条 不 同 的 信息 。playezr prop 将 接收 当 
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前 玩家 的 信息 ， 方便 我 们 访问 玩家 数据 。 此 处 将 搭配 使 用 v-if 和 v-else 指令 ， 以 及 刚刚 添加 
的 玩家 skipTurn 属性 : 


Vue.component ('overlay-content-player-turn', { 
template: “<div> 
<div class="big" v-if="player.skipTurn">{{ player.name }}, 
<br>your turn is skipped!</div> 
<div class="big" v-else>{{ player.name }},<br>your turn has 
come!</div> 
<div>Tap to continue</div> 
</div>., 
props: ['player'], 
l 


3. lagt=play 浮 层 


这 个 浮 层 稍微 复杂 一 点 。 我 们 需要 用 一 个 新 函数 获取 上 一 回合 玩家 出 的 牌 。 在 utilsjs 文件 中 ， 
添加 一 个 新 函数 getLastPlayedCard: 











function getLastPlayedCard(player) { 
return cards[lplayer.lastPlayedCardId] 
} 


现在 通过 opponent prop， 可 以 在 lastPlayedCard 计算 属性 中 使 用 该 函数 : 


Vue .component ('overlay-content-last-play', { 
template: “<div> 
<div Vv-if="opponent.skippedTurn">{{ opponent.name }} turn was 
skipped!</div> 
<template v-else> 
<div>{{ opponent .name }} just played:</div> 
<card :def="lastPlayedCard" /> 





pl 





</template> 
</div>., 
props: ['opponent'], 


computed: { 
lastPlayedCard() { 
return getLastPlayedCard (this.opponent) 





E 意 ， 这 里 直接 复 用 了 之 前 创建 的 cara 组 件 ， 用 来 显示 卡 牌 信息 。 





4. game-over 浮 层 


这 里 ， 我 们 先 创 建 另 外 一 个 名 为 play-result 的 组 件 ， 用 来 显示 玩家 是 胜利 还 是 失败 。 我 
们 将 展示 通过 prop 传递 来 的 玩家 姓名 ， 并 通过 计算 属性 计算 出 该 玩家 的 游戏 结果 ， 还 会 将 结果 
作为 动态 CSS 类 来 使 用 : 
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Vue .component ('player-result', { 
template: “<div class="player-result" :class="result"> 
<span class="name">{{ player.name }}</span> is 
<span class="result">{{ result }}</span> 
</div>., 
props: ['player'], 
computed: { 
result() { 
return this.player.dead ? 'defeated' : 'victorious' 
}) 


现在 ， 可 以 通过 遍历 players prop 并 使 用 play-result 组 件 创建 game-over 浮 层 了 : 


Vue.component ('overlay-content-game-over', { 
template: ‘<div> 
<div class="big">Game Over</div> 
<player-result v-for="player in players" :player="player" /> </div>, 
props: ['players'], 
}) 


5. 动态 组 件 





现在 ， 要 使 用 之 前 定义 的 activeoverlay 属性 ， 将 所 有 这 些 都 添加 到 overlay 组 件 中 。 





(1) 在 主 模板 中 ， 根据 activeoverlay 相应 的 值 添加 和 显示 组 件 : 


<overlay v-if="activeOverlay"> 
<overlay-content-player-turn 


Vv-if="activeOverlay === 'player-turn'" /> 
<overlay-content-last-play 
v-else-if="activeOverlay === 'last-play'" /> 
<overlay-content-game-over 
v-else-if="activeOverlay === 'game-over'" /> 
</overlay> 


6 如 果 activeOverlay 属性 为 null， 则 移 除 所 有 的 浮 层 。 


在 添加 prop 之 前 ， 需 要 在 state.js 中 增加 一 些 getter 对 应 用 状态 进行 修改 。 


(2) 第 一 个 getter 会 根据 currentPlayerIndex 属性 返回 player 对 象 : 


get currentPlayer() { 


return state.players[state.currentPlayerIindex] 
}, 


(3) 第 二 个 getter 返回 对 手 player 的 索引 : 


get currentOpponentId() { 


return state.currentPlayerIindex === 0 ?1 : 0 
}, 
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(4) 最 后 ， 第 三 个 getter 返回 相应 的 player 对 象 ; 


get _ currentOpponent () { 
return state.playersl[lstate.currentOpponentId] 
} 


(5) 现在 ， 我 们 可 以 给 浮 层 内 容 添 加 prop 了 : 


<overlay v-if="activeOverlay"> 








<overlay-content-player-turn 
Vv-if="activeOverlay === 'player-turn'" 
:player="currentPlayer" /> 

<overlay-content-last-play 
v-else-if="activeOverlay === 'last-play'" 
:opponent="currentOpponent" /> 

<overlay-content-game-over 





























v-else-if="activeOverlay === 'game-over'™" 
:players="players" /> 
</overlay> 
你 可 以 在 浏览 器 控制 台中 通过 设置 activeOverlay 属性 的 值 测试 这 些 浮 层 : 
state.activeOverlay = 'player-turn' 
state.activeOverlay = 'last-play' 
state.activeOverlay = 'game-over' 
state.activeOverlay = null 





如 果 要 测试 last-play 浮 层 ， 需 要 给 玩家 的 lastPlayedCargdIgd 属性 设置 一 
个 有 效 的 值 ， 比 如 catapult 或 farm。 


自从 添加 了 3 个 条 件 语句 之 后 ， 代 码 开始 凌乱 起 来 。 幸 好 ，Vue 提供 了 一 个 特殊 的 组 件 可 以 


把 其 转换 为 任意 的 组 件 : component 组 件 。 只 需要 将 它 的 is prop 设置 为 一 个 组 件 名 或 组 件 定义 
对 象 ， 甚 至 是 一 个 HTML 标签 ，component 组 件 就 会 变 为 相应 的 内 容 : 


<component is="h1">Title</component> 
<component is="overlay-content-player-turn" /> 


这 个 prop 和 其 他 任何 prop 一样 ,因此 可 以 使 用 v-pbina 指令 并 结合 一 个 JavaScript 表达 式 来 
动态 修改 组 件 。 如 果 使 用 activeoverlay 属性 来 做 这 件 事情 会 怎样 呢 y 有 什么 方法 可 以 方便 地 
为 3 个 浮 层 组 件 名 称 加 上 相同 的 over-content -前 缀 呢 ? 我 们 来 看 一 下 


<component :is="'overlay-content-' + activeOverlay" /> 
这 样 就 完成 了 。 只 需要 修改 activeoverlay 属性 的 值 , 就 可 以 修改 浮 层 中 所 显示 的 组 件 了 。 
(6) 添加 prop 之 后 ， 浮 层 在 主 模板 中 看 起 来 是 这 样 的 : 


<overlay v-if="activeOverlay"> 
<component :is="'overlay-content-' + activeOverlay" 
:player="currentPlayer" :opponent="currentOpponent" 
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:players="players" /> 
</overlay> 


6 不 用 担心 尚未 使 用 到 的 prop， 它 们 不 会 影响 各 个 浮 层 的 正常 逻辑 。 


6. 浮 层 动 画 
就 像 之 前 对 手 牌 所 做 的 那样 ， 这 里 使 用 一 个 过 渡 效 果 让 浮 层 “ 动 起 来 ”。 
(1) 在 overlay 组 件 外 层 ， 添 加 一 个 名 为 zoom 的 过 渡 : 


<transition name="zZoom"> 
<overlay v-if="activeOverlay"> 
<component :is="'overlay-content-' + activeOverlay" 
:player="currentPlayer" :opponent="currentOpponent" 
:players="players" /> 
</overlay> 
</transition> 


(2) 将 下 列 CSS 规则 添加 到 transition.css 文件 中 


.Zoom-enter-active, 
.Zoom-leave-active { 
transition: opacity .3s, transform .3s; 


} 


.Zoom-enter, 

.Zoom-leave-to { 
opacity 07 

transform: scale(.7); 


} 
这 是 一 个 简单 的 动画 效果 : 浮 层 在 淡出 的 同时 放大 。 

@ key 属性 

现在 ， 如 果 在 浏览 器 中 进行 尝试 ， 应 该 只 能 在 两 种 情况 下 看 到 动画 效果 : 


口 当 没有 任何 浮 层 显示 时 ， 设 置 显示 一 个 ; 
口 当 有 一 个 浮 层 显示 时 ， 将 activeoverlay 设置 为 null 以 隐藏 浮 层 。 


如 有 果 在 浮 层 之 间 切 换 ， 动画 并 不 会 生效 。 这 主要 是 Vue 更 新 DOM 的 方式 引起 的 。 在 之 前 的 
“特殊 的 key 属性 ”一 节 里 ， 我 们 已 经 知道 了 从 性 能 优化 的 角度 考虑 ，Vue 会 尽 可 能 复 用 DOM 
中 的 元 素 。 在 这 里 ， 想 要 在 浮 层 之 间 切 换 时 有 动画 效果 ， 需 要 使 用 key 特殊 属性 告知 Vue 将 不 
同 的 浮 层 当 作 单独 的 元 素 对 待 。 这 样 , 从 一 个 浮 层 过 渡 到 男 外 一 个 时 , 两 个 浮 层 都 会 出 现在 DOM 
中 ， 相 关 的 动画 也 会 生效 。 


下 面 就 给 overlay 组 件 添加 key 
























































性 。 这 样 当 修改 activeoverlay 值 时 ，Vue 就 可 以 将 


再 
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浮 层 当 作 多 个 单独 的 元 素 对 待 了 : 


<transition name="zZoom"> 
<overlay v-if="activeOverlay" :key="activeOverlay"> 


<component :is="'overlay-content-' + activeOverlay" 
:player="currentPlayer" :opponent="currentOpponent" :players="players" /> 
</overlay> 
</transition> 

















现在 ， 如 果 将 activeoverlay 设置 为 blaver-turn， 浮 层 的 key 将 是 player-turn。 
如 果 将 activeoverlay 设 置 为 1ast-play, 那 么 一 个 全 新 的 浮 层 将 被 创建 ,其 key 为 last-play。 
我 们 从 而 可 以 在 这 两 个 浮 层 之 间 实 现 动画 过 渡 效 果 。 可 以 通过 对 state.activeoverlay 设置 不 
同 的 值 在 浏览 器 中 试验 一 下 。 





: 丈 已 丰 旦 
7. 浮 层 背景 











到 这 里 ， 我 们 还 需要 给 浮 层 添加 背景 。 不 能 直接 将 背景 添加 到 overlay 组 件 中 ， 和 否则 背景 
也 会 随 着 组 件 放大 一 一 这 相当 奇怪 。 这 里 只 需要 使 用 之 前 创建 的 fage 动画 即 可 。 





在 主 模板 中 ， 添加 一 个 新 的 div 元 素 (class 为 overlay-backgroungd ) 到 zoom 过 渡 和 
overlay 组 件 之 前 : 
<transition name="fade"> 


<div class="overlay-background" v-if="activeOverlay" /> 
</transition> 





结合 v-if 指令 ， 只 有 当 任 意 浮 层 显 示 时 ,该 背景 才 会 显示 。 


3.5 游戏 世界 和 场景 


本 章 涉及 的 用 户 界 面 元 素 差不多 完成 了 , 接 下 来 构建 游戏 场景 的 相关 组 件 : 玩家 的 城堡 、 生 
命 值 和 食物 气泡 ， 以 及 背景 中 带动 画 效果 的 云 休 。 


在 components 文件 夹 中 创建 一 个 新 的 worldjs 文件 ， 并 添加 如 下 内 容 : 


i 











<script src="components/ui.js"></script> 
<script src="components/world.js"></script> 
<script src="main.js"></script> 


下 面 就 完 来 构建 城堡 吧 。 





3.5.1 城堡 








城堡 实际 上 很 简单 ,由 两 幅 图 像 和 一 个 城堡 旗帜 组 件 构成 , 其 中 城堡 旗帜 组 件 用 于 显示 生命 
值 和 食物 点 数 。 
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(1) 在 worldjjs 文件 中 , 创建 一 个 castle 组 件 , 里 面 有 两 幅 图 像 , 并 接收 players 和 index 
这 两 个 prop: 
Vue .component ('castle', { 


template: ‘<div class="castle" :class="'player-' + index"> 
<img class="building" :src="'svg/castle' + index + '.sSvg'" /> 


<img class="ground" :src="'svg/ground' + index + '.svg'" /> 
<!-- 稍 后 将 在 这 里 添加 一 个 城堡 旗帜 (castle-banners) 组 件 --> 

A hi 

props: ['player', 'index'], 


}) 


对 于 上 面 这 个 组 件 , 每 名 玩家 涉及 两 幅 图 像 : 一 幅 城 堡 图 像 ， 一 幅 高 台 图 像 。 这 
也 就 意味 着 总 共有 4 幅 图 像 。 例 如， 对 于 索引 为 0 的 玩家 ， 图像 为 castle0.svg 和 


ground0.svg。 


(2) 在 主 模板 的 top-bar 组 件 下 面 ， 创 建 一 个 CSS 类 为 worla 的 div 元 素 ， 对 players 
进行 遍历 来 显示 出 两 座 城 堡 。 另 外 ， 再 添加 一 个 CSS 类 为 1ang 的 div 元 素 : 


<div class="world"> 
<castle v-for=" (player, index) in players" :player="player" 
:index="index" /> 
<div class="langd" /> 
</div> 


在 浏览 器 中 ， 可 以 看 到 每 名 玩家 有 一 座 城堡 了 ， 如 下 图 所 示 。 





WTA ET 1 | 


Anne of Cleves 


Quick Repair 


Spend 3 Food 


Repair3 Damage= | 


This is not without 
consequences on the 
moral and energy! 


Your opponent lose 


Poison 
和 
Spend 1 Food # 


Do nothing 
3 Food# 





Catapult 
中 


Spend 2 Food # 
Deal 2 Damage 


Repair 5 Damage= 
Skip your next turn 
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3.5.2 ”城堡 旗帜 
城堡 旗帜 用 来 显示 城堡 的 生命 值 和 食物 点 数 。 在 castle-banners 组 件 中 有 两 个 组 件 ; 


口 一 个 高 度 可 变 的 垂直 旗帜 ， 高 度 的 变化 依赖 于 相关 统计 数量 ; 
口 一 个 用 于 显示 实际 值 的 小 气泡 。 


旗帜 看 起 来 如 下 所 示 。 








(1) 首先 , 创建 一 个 新 的 castle-banners 组 件 。 该 组 件 只 带 有 统计 图 标 , 以 及 一 个 player 
prop: 


Vue .component ('castle-banners', { 
template: “<div class="banners"> 
<!-- 食物 --> 
<img class="food-icon" src="svg/food-icon.svg" /> 
<!-- 这 里 是 小 气泡 --> 


<!-- 这 里 是 旗帜 栏 --> 


<!-- 这 里 是 生命 值 --> 
<img class="health-icon" src="svg/health-icon.svg" /> 


<!-- 这 里 是 小 气泡 --> 
<!-- 这 里 是 旗帜 栏 --> 
</div>., 
props: ['player'] 


}) 


(2) 添加 两 个 计算 属性 ， 用 来 计算 生命 值 和 食物 点 数 比 例 : 


computed: { 
foodRatio() { 
return this.player.food / maxFood 
} 
healthRatio() { 
return this.player.health / maxHealth 
} 
} 


78 第 3 章 项 目 2: 城堡 决斗 游戏 





i maxFood 和 maxHealth 定义 在 state.js 文件 的 最 前 面 。 


(3) 在 castle 组 件 中 ， 添 加 一 个 新 的 castle-banners 组 件 : 


template: “<div class="castle" :class="'player-' + index"> 
<img class="building" :src="'svg/castle' + index + '.sSvg'" /> 


<img class="ground" :src="'svg/ground' + index + '.sSvg'" /> 
<castle-banners :player="player" /> 
yA i 


1. 食物 和 生命 值 气 

该 组 件 包括 一 幅 图 像 和 一 个 文本 , 后 者 用 来 显示 城堡 的 食物 点 数 或 生命 值 。 这 两 个 数值 决定 
了 组 件 的 位 置 : 当 数 值 减少 时 ， 气 泡 向 上 移动 ; 当 数 值 增加 时 ， 气 泡 将 向 下 移动 。 

这 个 组 件 需要 以 下 3 个 prop。 
口 type: 区 分 食物 和 生命 值 ， 用 于 CSS 类 和 图 像 路 径 


口 value: 在 小 气泡 中 显示 的 数值 
口 ratio: 当前 值 除 以 最 大 值 


我 们 还 需要 一 个 计算 属性 ， 用 于 根据 ratio prop 计算 出 小 气泡 的 垂直 位 置 。 位 置 的 垂直 范 
围 是 40 ~ 260 像素 。 因 此 ， 这 个 位 置 值 可 以 用 如 下 表达 式 计算 得 到 : 


(this.ratio * 220 + 40) * state.worldRatio + 'px' 



































记 住 ， 将 每 个 位 置 或 尺寸 都 乘 以 worldRatio 的 值 ， 这 样 游戏 才 会 考虑 浏览 器 
窗口 的 尺寸 。( 如 果 窗 口 变 大 ， 游 戏 界 面 也 会 跟着 变 大 ， 反 之 亦 然 。) 


(1) 现在 构建 一 个 新 的 bubble 组 件 : 


Vue .component ('bubble', { 
template: “<div class="stat-bubble" :class="type + '-bubble'" 
:style="bubbleStyle"> 
<img :src="'svg/' + type + '-bubble.svg'" /> 
<div class="counter">{{ value }}</div> 
/divVS 
props: ['type', 'value', 'ratio'], 
computed: { 
bubbleSstyle() { 
return { 
top: (this.ratio * 220 + 40) * state.worldRatio + 'px', 
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bubpble 组 件 的 根 元 素 是 一 个 aiv， 它 有 一 个 stat-bubble CSS 类 、 一 个 动态 的 CSS 类 
(根据 type prop 的 值 ， 取 'food-bubble' 或 'health-bubble' )， 以 及 依赖 于 计算 属性 
bubbleStyle 的 一 个 动态 CSS。 


该 组 件 还 包含 一 幅 SVG 图 像 (食物 和 生命 值 的 图 像 不 同 )， 以 及 一 个 显示 数值 的 aiv， 其 


class 为 counter。 


(2) 将 食物 点 数 气泡 和 生命 值 气泡 添加 至 castle-pbanners 组 件 中 : 


template: ‘<div class="banners"> 
<!-- 食物 --> 
<img class="food-icon" src="svg/food-icon.svg" /> 
<bubble type="food" :value="player.food" :ratio="foodRatio" /> 
<!-- 这 里 是 底 帜 栏 --> 











<!-- 生命 值 --> 
<img class="health-icon" src="svg/health-icon.svg" /> 
<bubble type="health" :value="player.health" 
:ratio="healthRatio" /> 
<!-- 这 里 是 旗帜 栏 --> 
ALVS 


2. 旗帜 栏 


这 里 需要 构建 另外 一 人 I 垂直 旗帜 ,。 它 的 长 度 取 决 于 食物 点 数 或 生 
命 值 。 为 了 方便 对 旗帜 的 高 度 进 进 和 修改 ， Rs 动态 SVG 模板 。 


i 首先 ， 创建 一 个 组 件 ， 该 组 件 有 两 个 prop ( color 和 zatio )， 以 及 一 个 neignt 计算 














Vue .component ('banner-bar', { 


PEGBes LUE"EOLOE,. MratLro]y 
computed: { 
height() { 


return 220 * this.ratio + 40 
} 
} 

} 

我 们 已 经 用 过 两 种 方式 来 定义 模板 : 在 页 面 中 使 用 HTML， 或 在 组 件 中 对 template 选项 
设置 字符 串 。 这 里 将 使 用 另外 一 种 方法 来 编写 组 件 模板 : 在 HTML 中 编写 一 个 特殊 的 <script> 
标签 。 其 工作 原理 是 在 这 个 <script> 标 签 中 编写 模板 ， 并 定义 唯一 的 ID; 当 定 义 组 件 的 时 候 ， 
通过 这 个 ID 引用 该 模板 。 


(2) 打开 banner-template.svg 文件 ,其 中 包含 一 幅 旗 帜 图 像 的 SVG 标记 内 容 ,， 用 作 动 态 模板 。 
复制 文件 中 的 内 容 。 
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(3) 在 index.html 文件 的 <aiv iaqa="app"> 元 素 之 后 ， 添 加 一 个 <script> 标 签 ， 其 type 为 
text/x-template、id 为 banner。 然 后 将 上 一 步 中 复制 的 svg 内 容 粘 贴 进去 : 


<script type="text/x-template" id="banner"> 
<SVg viewBox="0 0 20 260"> 
<path :dQ="m 0,0 20,0 0,s${height} -10,-10 -10,10 2 " 
:style=" .fill:$S{color};stroke:none;." /> 
</SVG> 
</script> 


如 上 所 示 , 这 是 一 个 标准 模板 ,所 有 的 语法 和 指令 都 可 以 使 用 。 这 里 两 次 使 用 了 
Vv-bingd 指令 的 简写 。 注 意 ， 在 所 有 的 Vue 模板 中 ， 都 可 以 使 用 SVG 标记 内 容 。 





(4) 现在 ， 回 到 组 件 的 定义 中 ， 添 加 一 个 template 选项 ， 并 在 # 符 号 后 面 跟 上 <script> 标 
签 模板 的 ID : 


Vue.component ('banner-bar', { 
template: '#banner', 
A ear 


}) 


完成 ! 现在 组 件 将 自动 在 页 面 中 寻找 ID 为 bannet 的 <script> 标 签 模板 , 并 将 其 用 作 自 己 
的 模板 。 


(5) 在 castle-banners 组 件 中 ,添加 两 个 banner-pbar 组 件 ， 并 设置 相应 的 颜色 和 比例 : 


template: “<div class="banners"> 
<!-- 食物 点 数 --> 
<img class="food-icon" src="svg/food-icon.svg" /> 
<bubble type="food" :value="player.food" :ratio="foodRatio" /> 
<banner-bar class="food-bar" color="#288339" :ratio="foodRatio" 
/> 


<!-- 生命 值 --> 
<img class="health-icon" src="svg/health-icon.svg" /> 
<bubble type="health" :value="player.health" :ratio="healthRatio" /> 
<banner-bar class="health-bar" color="#9b2e2e" 
:ratio="healthRatio" /> 
TY 


现在 , 可 以 看 到 旗帜 已 经 挂 在 城堡 上 了 。 如 果 修 改 食物 点 数 和 生命 值 ， 旗帜 的 高 度 将 会 随 之 


对 值 做 动画 处 理 


当 旗 帜 随 着 值 的 变化 而 伸缩 时 , 如 果 添 加 一 点 动画 效果 会 更 加 漂亮 。 因为 需要 动态 修改 SVG 
的 路 径 ， 所 以 不 能 使 用 CSS 过 渡 。 我 们 需要 使 用 另外 的 方法 : 对 模板 中 height 属性 的 值 做 动 
画 处 理 。 
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(1) 首先 ， 将 模板 中 的 计算 属性 height 重 命名 为 targetHeight: 


computed: { 
targetHeight() { 
return 220 * this.ratio + 40 
} 
} 


无 论 何 时 ， 只 要 ratio 值 发 生 了 改变 ，targetHeight 属性 将 被 重新 计算 。 


(2) 添加 一 个 新 的 neignt 数据 属性 ， 每 次 targetHeight 发 生变 化 时 ， 就 可 以 对 其 做 动画 
处 理 : 


data() { 
return { 
height: 0, 
} 
3 





(3) 当 组 件 创建 完成 之 后 , 在 created 多 子 中 用 targetHeight 对 heignt 的 值 进行 初始 化 。 
created() { 


this.height = this.targetHeight 
} 


要 对 heignt 的 值 做 动画 处 理 ， 需 要 用 到 流行 的 TWEEN .js 库 ， 它 已 经 被 添加 到 index.html 
文件 中 了 。 这 个 库 的 工作 原理 是 创建 一 个 Tween 对 象 ， 并 给 该 对 象 传 递 一 个 起 始 值 、 一 个 组 动 
函数 以 及 一 个 结束 值 。 这 个 库 还 提供 了 回调 方法 ,例如 将 用 于 在 动画 过 程 中 更 新 height 属性 的 


onUpdateo 





























(4) 我 们 希望 每 当 targetHeight 属性 发 生 改 变 时 ,就 开始 播放 动画 ， 因 此 可 以 用 下 面 的 动 
画 代 码 添加 一 个 侦 听 器 : 


watch: { 
targetHeight (newValue, oldValue) { 
const vm = this 
new TWEEN.Tween({ value: oldValue }) 
.easing (TWEEN.Easing.Cubic.InOut) 
.to({ value: newValue }, 500) 
.onUpdate(function() { 


vm.height = this.value.toFixed(0) 
} 
:tart (让 


在 onUpdate 回调 方法 中 ，this 上 下 文 是 Tween 对 象 ， 而 不 是 Vue 组 件 实例 。 
这 也 是 为 什么 我 们 要 在 代码 中 使 用 一 个 临时 变量 保存 组 件 实例 this (这 里 是 
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(5) 在 这 里 ， 还 要 做 最 后 一 件 事 来 让 动画 生效 。 在 main.js 文件 中 ， 借 助 浏览 器 的 request- 
AnimationFrame 图 数 ， 请 求 浏 览 器 绘制 帧 使 TVEEN. js 库 计 时 : 


// Tween.js 
requestAnimationFrame (animate); 














function animate(time) { 
requestAnimationFrame (animate); 
TWEEN .update (time); 

} 


变 为 可 见 。 也 就 是 说 如 果 用 户 看 不 见 页 面 ,动画 是 不 会 播放 的 ,以 此 节约 了 计算 
机 资源 和 电量 。 注 意 ，CSS 过 渡 和 动画 也 是 使 用 这 种 方式 的 。 


现在 ， 当 修改 玩家 的 食物 点 数 和 生命 值 时 ， 旗 帜 会 渐进 式 地 伸缩 。 


如 果 选 项 卡 在 后 台 ，reduestaAnimationFrame 函数 会 暂停 调用 ， 直 到 选项 卡 


3.5.3 ” 云 的 动画 


为 了 给 游戏 场景 添加 一 点 生气 , 我 们 将 创建 一 些 在 天 空中 疆 动 的 云 休 。 这 些 云 末 的 位 置 和 动 
画 持 续 时 间 将 是 随机 的 ， 并 且 云 打 会 从 窗口 的 左边 向 右边 驹 动 。 














(1) 在 worldjs 文件 中 ， 添 加 云 打 动画 的 最 小 和 最 大 持续 时 间 : 


const cloudAnimationDurations = { 
min: 10000，// 10 秒 
max: 50000，，// 50 秒 


(2) 接着 ,创建 cloua 组 件 ， 其 中 包含 一 幅 图 像 和 一 个 type prop: 


Vue .component ('cloud', { 
template: “<div class="cloud" :class="'cloud-' + type" > 
<img :src="'svg/cloud' + type + '.svg'" /> 
A hin 
props: ['type'], 
}) 


人 这 里 提供 了 5 种 不 同 的 云 条 ， 所 以 type prop 的 范围 将 是 1 ~5。 





pl 


(3) 我 们 需要 通过 修改 响应 式 的 style 数据 属性 来 修改 组 件 中 的 z-index 和 transform 
CSS 属性 : 











data() { 
return { 
style: { 
transform: 'none', 
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zIndex: 0, 
} 
} 
} 


(4) 利用 v-pbina 指令 应 用 下 面 这 些 style 属性 : 


<div class="cloud" :class="'cloud-' + type" :style="style"> 





(5) 下 面 创建 一 个 新 的 方法 ， 利 用 transform CSS 属性 设置 cloua 组 件 的 位 置 : 


methods: { 
setPosition(left, top) { 
// 使 用 transform 可 以 获得 更 好 的 性 能 
this.style.transform = ‘translate(${left}px, ${top}px). 
} 














} 





(6) 当 图 片 加 载 时 ， 需 要 初始 化 云 条 的 水 平 位 置 ， 使 其 在 可 视 范围 之 外 。 创 建 一 个 新 方法 
initPosition， 该 方法 使 用 setPosition 方法 设置 位 置 : 
methods: { 
WS eo 
initPosition() { 
// 元 素 宽 度 
const width = this.S$el.clientWidtDn 
this.setPosition(-width, 0) 
} 
} 


(7) 使 用 v-on 指令 的 简写 对 图 像 添加 一 个 监听 器 来 监听 1oaqd 事件 ， 并 在 事件 发 生 时 调用 
initPosition 方法 : 

<img :src="'svg/cloud' + type + '.svg'" @load="initPosition" /> 

动画 

现在 ， 我 们 对 云 打 做 动画 处 理 。 和 之 前 的 城堡 旗帜 一 样 ， 这 里 也 使 用 TWEEN .js 库 。 


(1) 首先 , 创建 一 个 新 的 方法 startAnimation。 该 方法 将 计算 出 一 个 随机 的 动画 持续 时 间 ， 
并 接收 一 个 aelay 参数 : 


methods: { 
VE 





| 











startAnimation(delay = 0) { 
const vm = this 
// 元 素 宽 度 
const width = this.s$sel.clientWidth 


// 随机 动画 持续 时 间 


const { min, max } = cloudAnimationDurations 
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const animationDuration = Math.random() * (max - min) + min 


// 将 速度 快 的 云 采 放 到 最 前 面 


this.style.zIndex Math.round (max - animationDuration) 
// 动画 在 这 里 


移动 速度 越 快 ， 云 条 的 动画 持续 时 间 将 越 短 。 通 过 z-index CSS 属性 ， 将 移动 
速度 快 的 云 条 显示 在 最 前 面 。 
(2) 在 startAanimation 方法 中 , 计算 出 云 打 的 随机 垂直 位 置 ， 然 后 创建 一 个 Tween 对 象 。 
这 个 Tween 对 象 将 在 一 定 的 延迟 之 后 ， 通 过 在 每 次 更 新 时 设置 云 打 的 位 置 ， 以 对 云 打 做 水 平移 
动 的 动画 处 理 。 当 它 完成 时 ， 将 在 随机 延迟 后 启动 男 外 一 个 动画 : 


























// 随机 位 置 


const top = Math.random() * (window.innerHeight * 0.3) 


new TWEEN.Tween({ value: -width }) 
.to({ value: window.innerWidth }, animationDuration) .delay (delay) 
.onUpdate(function() { 
vm.setPosition(this.value, top) 
} 
.onComplete(() => { 
// 随机 廷 迟 
this.startAnimation(Math.random() * 10000) 
} 
.Start () 


(3) 在 组 件 的 mounted 钩子 中 ， 调 用 startAnimation 方法 ， 以 播放 初始 动画 (传人 一 个 
随机 延迟 ): 


mounted() { 
// 以 负 值 延迟 开始 动画 
// 所 以 动画 将 从 中 途 开 始 
this.startAnimation(-Math.random() 
cloudAnimationDurations.min) 


和 
我 们 的 cloud 组 件 完成 了 。 
(4) 在 主 模板 的 worla 元 素 中 添加 一 些 云 打 : 


大 


<div class="clouds"> 
<cloud v-for="index in 10" :type="(index - 1) 


</div> 


各 与" 和 LS 


6 注意 , 传 入 type prop 的 值 的 范围 是 1 ~ 5。 这 里 , 使 用 8 操作 符 返 回 除 以 5 的 余数 。 
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云 的 动画 应 该 具有 类 似 下 面 的 效果 。 








3.6 ”游戏 玩法 


至 此 ， 所 有 的 组 件 都 完成 了 ! 现在 只 需要 添加 一 些 游戏 逻辑 就 大 功 告 成 了 。 当 游戏 开始 时 ， 
每 名 玩家 分 别 抽取 自己 的 初始 手 牌 。 


然后 ， 玩 家 的 每 个 回合 都 包含 以 下 步骤 : 


(1) player-turn 浮 层 显示 时 ， 玩 家 知道 到 了 自己 的 回合 ; 
(2) last-play 浮 层 显示 上 一 轮 对 手 的 出 牌 情 况 ; 

(3) 玩家 单 击 选中 卡 牌 完成 出 牌 ; 

(4) 从 玩家 的 手 牌 中 移 除 选中 的 卡 牌 ， 并 使 卡 牌 的 作用 生效 ; 
(5) 稍微 等 一 会 ， 这 样 玩 家 就 能 看 到 卡 牌 生效 的 效果 了 ; 

(6) 然后 ， 回 合 结束 ， 从 当前 玩家 切换 到 另外 一 名 玩家 。 








3.6.1 抽取 卡 牌 
在 抽取 卡 牌 前 ， 先 在 state.js 文件 中 添加 两 个 属性 到 应 用 state 中 : 


var State = { 
A 
drawPile: pile, 
discardPile: {}, 


} 
drawPile 属性 是 玩家 可 以 抽 牌 的 牌 堆 ,。 使 用 cards.js 中 定义 的 bile 对 象 对 其 初始 化 。 pile 
的 每 个 键 都 是 卡 牌 定 义 中 的 ia， 值 则 是 牌 堆 中 这 种 类 型 的 卡 牌 数量 。 


discardPile 属性 与 arawPile 属性 相同 ， 不 过 它 的 用 处 是 : 玩家 打出 的 所 有 卡 牌 都 将 从 
手 牌 中 移 除 ， 并 放 到 这 个 弃 牌 堆 中 。 如 果 drawPile 空 了 ; 将 使 用 aiscardqPile 重新 填 满 它 ( 此 
时 discardPile 将 变 为 空 )。 
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1. 初始 手 牌 

在 游戏 开始 时 ， 每 名 玩家 将 抽取 一 些 卡 牌 。 

(1) 在 utilsjs 文件 中 ， 有 一 个 函数 专门 为 玩家 抽 牌 : 
drawInitialHand (player) 


(2) 在 mainjs 文件 中 , 添加 一 个 新 的 函数 peginGame, 用 来 调用 每 名 玩家 的 drawInitialHand 
函数 : 


function beginGame() { 
state.players.forEach (drawInitialHangd) 


} 


(3) 在 main.js 文件 中 主 组 件 的 mountea 钩子 中 调用 该 函数 : 


mounted() { 
beginGame () 


小 
2. 手 牌 
为 了 显示 当前 玩家 手中 的 卡 牌 ， 需 要 在 应 用 state 中 添加 一 个 新 的 getter。 


(1) 在 statejs 文件 中 的 state 对 象 中 添加 一 个 currentHand getter: 








get currentHand() { 
return state.currentPlayer.hand 


过 


(2) 现在 可 以 在 主 模板 中 移 除 testHang 属性 ， 并 使 用 currentHanad 代替 它 : 


<hand v-if="!activeOverlay" :cards="currentHand" @card-play="testPlayCard" /> 


(3) 你 还 可 以 移 除 之 前 在 主 组 件 中 为 了 测试 而 添加 的 createTestHand 方 法 和 created 钩子 : 


created () { 
this.testHand = this.createTestHand() 
es 














3.6.2 出 牌 
玩家 出 牌 主要 分 为 以 下 三 个 步骤 ; 


(1) 将 卡 牌 从 玩家 的 手 牌 中 移 除 ， 并 将 其 添加 到 弃 牌 堆 中 ， 这 会 触发 卡 牌 动画 ; 
(2) 等 待 卡 牌 动画 结束 ; 
G) 应 用 卡 牌 的 效果 。 
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1. 禁止 作 头 
游戏 过 程 是 不 允许 作弊 的 。 我 们 在 写 游戏 逻辑 时 ， 应 该 时 刻 牢 记 该 原则 。 
(1) 在 state.js 文件 中 添加 一 个 新 的 canPlay 属性 到 应 用 状态 中 : 


Var State = { 
pL sas 
canPlay: false, 


} 








上 


这 个 属性 用 于 防止 玩家 在 回合 中 重复 出 牌 : 因为 出 牌 时 有 许多 动画 需要 执行 和 等 待 ， 所 以 不 
希望 玩家 在 此 过 程 中 作弊 。 




















我 们 会 通过 canPlay 做 两 件 事情 : 首 匈 ， 当 玩家 出 牌 时 ， 检 查 玩家 是 否 已 经 出 过 一 张 牌 ; 
其 次 ,在 CSS 中 禁用 手 牌 上 的 鼠标 事件 。 




















(2) 在 主 组 件 中 添加 一 个 cssclass 计算 属性 .如 果 canPlay 属性 为 true, 则 添加 can-play 
CSS 类: 








computed: { 
cssClass() { 
return { 
'can-play': this.canPlay， 
} 
}, 
} 


(3) 在 主 模板 的 根 aiv 元 素 中 添加 一 个 动态 CSS 类 : 


<div id="#app" :class="cssClass"> 


2. 从 手 牌 中 移 除 卡 牌 
当 一 张 卡 牌 被 打出 时 ， 应 该 将 其 从 当前 玩家 的 手 牌 中 移 除 。 以 下 几 步 将 完成 这 项 任务 。 


(1) 在 mainjs 中 创建 一 个 新 函数 playcard， 它 接收 一 张 卡 牌 作为 参数 ， 检 查 玩家 是 否 可 以 
出 牌 , 然后 将 该 卡 牌 从 手 牌 中 移 除 ， 并 调用 aagcardToPile 函数 (定义 在 utilsjs 文 件 中 ) 将 卡 
牌 放 到 弃 牌 堆 中 : 

function playCard(card) { 

if (State.canPlay) { 


State.canPlay = false 
currentPlayingCard = card 








// 将 卡 牌 从 玩家 手 牌 中 移 除 
const index = state.currentPlayer.hand.indexOf (card) 
state.currentPlayer.hand.splice(index, 1) 
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// 将 卡 牌 放 到 弃 牌 堆 中 


addCardTopPile(state.discardPile, card.id) 


这 里 将 玩家 打出 的 卡 牌 存储 到 currentPlayingCarg 变量 中 , 因为 后 面 需要 应 
用 这 张 卡 牌 的 效果 。 


(2) 在 主 组 件 中 ,将 testPlaycard 方法 替换 为 新 的 nandlePlayCard, 后 者 调用 playCcard 
函数 : 


methods: { 
handlePlayCard(card) { 
playCard (card) 
和 
下 








(3) 不 要 忘记 修改 主 模板 中 对 hand 组 件 的 事件 监听 器 : 





<hand v-if="!activeOverlay" :cards="currentHand" @card- 
play="handlePlayCard" /> 


3. 等 待 卡 牌 过 渡 结 束 


当 卡 牌 被 打出 后 ,也 就 意味 着 已 经 将 其 从 手 牌 列 表 中 移 除 了 , 这 将 触发 一 个 离开 动画 。 在 继 
续 游 戏 之 前 , 我 们 希望 等 到 动画 结束 。 幸 运 的 是 ，<transition> 和 <transition-group> 组 件 
可 以 触发 事件 。 


我 们 在 这 里 需要 的 事件 就 是 after-leave。 当 然 ， 还 有 其 他 对 应 每 个 过 渡 阶 段 的 事件 : 


before-enter、 enter、 atfer-ent r 等 。 











jn 











(1) 在 hang 组 件 中 ,添加 一 个 关于 after-leave 类 型 的 事件 监听 上 需 : 


<transition-group name="card" tag="div" class="cards" @after- 
leave="handleLeaveTransitionEnd"> 


(2) 创建 一 个 相应 的 方法 ， 发 送 一 个 card-leave-end 事件 到 主 模板 中 : 


methods: { 
A ah 
handleLeaveTransitionEnd() { 
this.s$emit('card-leave-end') 
Fs 
有 


(3) 在 主 模板 的 hand 组 件 中 ， 添 加 一 个 关于 card-leave-end 类 型 的 事件 监听 融 : 


<hand v-if="!activeOverlay" :cards="currentHand" @card- 
play="handlePlayCard" @card-leave-end="handleCardLeaveEnd" /> 
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(4) 创建 一 个 相应 的 方法 : 


methods: { 
J 


handleCardLeaveEnd() { 
console.log('card leave end') 


} 
} 


稍 后 将 编写 该 方法 的 逻辑 代码 。 
4. 应 用 卡 牌 效 果 


当 卡 牌 动画 结束 后 , 将 卡 牌 的 效果 应 用 到 玩家 身上 。 例如 , 增加 当前 玩家 的 食物 点 数 或 降低 
对 手 的 生命 值 。 


(1) 在 main.js 文件 中 ， 添 加 函数 applycara， 它 将 调用 定义 在 utilsjs 文件 中 的 apply- 
CardEffect: 








function applyCard() { 
const card = currentPlayingCard 


applyCardEffect (card) 
} 


然后 稍 等 一 会 ， 以 便 玩家 能 看 到 卡 牌 的 效果 ,理解 当前 发 生 了 什么 。 接 着 ,检查 是 否 有 玩家 
“死亡 ”， 以 结束 游戏 ( 使 用 utils.js 文件 中 定义 的 checkPlaverLost 函数 ) 或 者 继续 下 一 回合 。 


(2) 在 applycard 函数 中 ， 添 加 如 下 逻辑 代码 : 


// 稍 等 一 会 ， 让 玩家 观察 到 发 生 了 什么 
setTimeout (() => { 
// 检查 玩家 是 否 “ 死 亡 ” 
state.players.forEach (checkPlayerLost) 


























if (isOnePlayerDead()) { 
endGame () 
} else { 
nextTurn() 
} 
F5200) 





(3) 现在 ， 在 applycard 后 面 添加 两 个 空 图 数 nextTurn 和 endGame: 


function nextTurn() { 
// TODO 
} 


function endGame() { 
// TODO 
} 
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(4) 现在 可 以 修改 主 组件 中 的 handlecardLeaveEnd 方法 了 ， 让 其 调用 刚刚 创建 的 
applyCard 际 数 : 
methods: { 
A 


handleCardLeaveEnd() { 
applyCard () 
Ey 
} 


3.6.3 下 一 回合 
nextTurn 函数 非常 简单 : 把 回合 数 加 一 ， 修 改 当前 的 玩家 ， 并 显示 player-turn 浮 层 。 
在 nextTurn 函数 中 添加 相应 的 代码 : 


function nextTurn() { 
state.turn++ 
state.currentPlayerindex = state.currentOpponentIid 
state.activeOverlay = 'player-turn' 


} 

1. 新 的 回合 

浮 层 显示 过 后 ， 新 的 回合 开始 ， 此 时 还 需要 一 些 逻 辑 处 理 。 

(1) 首先 ,利用 newTurn 函数 隐藏 已 经 显示 的 浮 层 界 面 。 它 会 根据 卡 牌 效果 跳 过 当前 玩家 的 
回合 ,或 者 开始 新 的 回合 : 


function newTurn() { 
state.activeOverlay = null 
if (state.currentPlayer.skipTurn) { 
skipTurn () 
} else { 
startTurn() 
} 


如 果 某 些 卡 牌 的 skipTurn 属性 为 true， 那 么 玩家 的 回合 将 被 跳 过 。 对 应 的 还 有 一 个 
skippedTurn 属性 ， 会 在 last-play 浮 层 中 向 下 一 名 玩家 显示 对 手 跳 过 了 上 一 回合 。 


(2) 创建 skipTurn 函数 ,将 skippedTurn 设置 为 true, 将 skipTurn 属性 设置 为 false， 
然后 直接 进入 下 一 回合 : 


function skipTurn() { 
state.currentPlayer.skippedTurn = true 
state.currentPlayer.skipTurn = false 
nextTurn () 


} 
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(3) 创建 startTurn 虹 数 ， 用 于 重 置 玩 家 的 skippedTurn 属性 。 如 果 这 是 玩家 的 第 二 个 回 
合 ， 则 让 其 抽 一 张 卡 牌 (这样 玩 家 在 开始 新 的 回合 时 ， 手 里 总 是 有 5 张 卡 牌 ): 


function startTurn() { 
state.currentPlayer.skippedTurn = false 
// 如 果 两 名 玩家 都 已 经 玩 过 一 个 回合 
if (state.turn > 2) { 
// 抽 一 张 新 的 卡 牌 
setTimeout (() => { 
state.currentPlayer.hand.push (drawCard()) 
State.canPlay = true 
} 7 :8.00.) 
} else { 
State.canPlay = true 
} 
} 


此 时 ， 可 以 使 用 canPlay 属性 允许 玩家 出 牌 了 。 
2. 浮 层 家 面 的 关闭 动作 


现在 ， 需 要 处 理 玩 家 单 击 每 个 浮 层 时 触发 的 动作 。 我 们 将 创建 一 个 映射 ， 键 是 泽 层 的 类 型 ， 
值 则 是 操作 触发 时 调用 的 函数 。 


(1) 将 映射 添加 到 mainjs 文件 中 : 









































Var overlayCloseHandlers = { 
'player-turn' () { 
if (state.turn > 1) { 
state.activeOverlay = 'last-play' 
} else { 
newTurn ( ) 
} 
} 
'lJast-play' () { 
newTurn ( ) 
'game-over' () { 


// 重新 加 载 游戏 
document .location.reload() 
} 
} 


针对 player-turn 浮 层 , 由 于 在 第 一 个 回合 开始 时 , 对手 还 没有 打出 任何 卡 牌 ， 
所 以 只 有 在 第 二 个 (或 者 更 多 ) 回合 时 ， 才 切换 到 last-play 浮 层 。 








(2) 在 主 组 件 中 , 添加 一 个 handleoverlayclose 方法 , 它 调用 与 当前 显示 的 浮 层 界面 ( 属 
性 为 activeoverlay ) 相对 应 的 动作 函数 : 
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methods: { 
人 
handleOverlayClose() { 
overlayCloseHandlers[this.activeOverlay]() 
Ee 


(3) 在 overlay 组 件 上 , 添加 关于 close 类 型 的 事件 监听 顺 。 当 用 户 在 浮 层 界面 上 单 击 时 ， 
将 触发 该 监听 需 : 


<overlay v-if="activeOverlay" :key="activeOverlay" 
@close="handleOverlayClose"> 


3. 游戏 结束 


最 后 ， 在 endGame 函数 中 将 act iveOverlay 属性 设置 为 game-over: 














function endGame() { 
state.activeOverlay = 'game-over' 


} 


这 样 ， 如 果 有 玩家 “死亡 ”， 就 会 显示 game-over 学 层 。 





3.7 小 结 


卡 牌 游戏 到 此 结束 。 我 们 领略 了 Vue 的 很 多 新 特性 , 它们 有 助 于 轻松 地 构建 出 具有 互动 性 的 
丰 语 体验 。 本 章 介 绍 并 使 用 的 最 重要 的 一 个 方法 就 是 基于 组 件 来 开发 Web 应 用 。 这 种 方法 有 助 
于 我 们 在 开发 大 型 应 用 时 , 将 前 端 逻辑 划分 为 小 的 、 独 立 的 、 可 复 用 的 组 件 。 我 们 讨论 了 组 件 之 
间 的 通信 方法 ,包括 利用 prop 进行 从 父 组 件 到 子 组 件 的 通信 ， 以 及 利用 自 定 义 事件 进行 从 子 组 件 
到 父 组 件 的 通信 。 为 了 使 游戏 更 加 生动 , 我 们 还 添加 了 一 些 动画 和 过 渡 效 果 ( 使 用 <transition> 
和 <transition-group> 特 殊 组 件 )。 我 们 还 介绍 了 在 模板 内 部 操作 SVG， 并 利用 <component> 
特殊 组 件 动态 地 显示 了 一 个 组 件 。 


在 下 一 章 中 , 我 们 将 利用 Vue 的 组 件 文件 和 其 他 一 些 功能 开发 更 高 级 的 应 用 。 这 些 功能 可 以 
帮助 我 们 构建 出 更 大 型 的 应 用 。 
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从 本 章 之 后 ,我 们 将 开始 构建 更 复杂 的 应 用 。 为 此 ， 还 需要 一 些 其 他 工具 和 库 。 本 章 将 涵盖 
以 下 主题 : 
口 设置 开发 环境 ; 
口 使 用 vue-cli 搭建 一 个 Vue 应 用 的 脚手架 ; 
口 编写 和 使 用 单 文件 组 件 。 

















4.1 设置 开发 环境 


为 了 创建 更 复杂 的 单 页 应 用 ,建议 使 用 一 些 工 具 来 简化 开发 。 在 本 节 中 , 我 们 将 安装 它们 来 
准备 好 开发 环境 。 你 需要 在 计算 机 上 安装 Node.js 和 npm， 并 且 确 保 Node 的 版 本 在 8x 以 上 ( 推 
荐 使 用 最 新 的 Node 版 本 )。 











4.1.1 安装 官方 命令 行 工 具 vue-cli 
我 们 需要 的 第 一 个 包 是 vue-cli， 这 是 一 个 可 以 帮助 我 们 创建 Vue 应 用 的 命令 行 工具 。 
(1) 在 终端 中 输入 以 下 命令 ， 它 会 安装 vue-cli 并 将 其 作为 一 个 全 局 的 包 : 


npm install -g vue-c]li 





6 你 可 能 需要 以 管理 员 身 份 运 行 这 个 命令 。 


(2) 为 了 测试 vue-cli 可 以 正常 运行 ， 我们 用 以 下 命令 打印 它 的 版 本 : 


Vvue --version 
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4.1.2 ”代码 编辑 器 


任何 文本 编辑 器 都 可 以 ， 但 是 我 推荐 使 用 Visual Studio Code 或 者 Atom。 如 果 使 用 Visual 
Studio Code, 需要 安装 octref 开发 的 扩展 vetur (https://github.com/vuejs/vetur )。 如 果 使 用 Atom， 
则 需要 安装 hedefalk 开发 的 扩展 language-vue ( https://atom.io/packages/language-vue )。 


JetBrains 最 新 版 本 的 WebStorm IDE 已 经 内 建 了 对 Vue 的 支持 。 
你 还 可 以 安装 一 些 插 件 来 支持 预 处 理 语言 ， 如 Sass、Less 和 Stylus。 
































4.2 第 一 个 完整 的 Vue 应 用 


之 前 的 应 用 都 是 用 一 种 颇 为 传统 的 方法 构建 的 : 使 用 <script> 标 签 和 简单 的 JavaScript。 在 
本 节 中 , 我们 将 探索 几 种 新 方法 , 通过 一 些 强 大 的 功能 和 工具 来 创建 Vue 应 用 。 此 处 ,我 们 将 创 
建 一 个 小 型 项 目 来 演示 即将 使 用 的 新 工具 。 


























Ws 


4.2.1 项目 脚 手 染 


vue-cli 工具 使 我 们 能 够 创建 随时 可 用 的 应 用 框架 ,以 帮助 我 们 开始 一 个 新 项 目 。 它 与 一 个 项 
目 模板 系统 一 起 工作 ， 会 向 你 提出 一 些 问题 然后 根据 需求 定制 框架 。 
(1) 使 用 以 下 命令 列 出 官方 项 目 模板 : 


vue list 


以 下 是 终端 中 显示 的 列表 。 























Available official templates: 


太 browserify - A fuLL-featured Browserify + vueify setup with hot-reload, linting & unit testing. 

友 browserify-simple - A simple Browserify + vueify setup for quick prototyping . 

太 simple - The simplest possible Vue setup in a single HTML file 

太 webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. 
太 webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. 








官方 模板 有 以 下 3 种 主要 类 型 。 


D simple: 不 使 用 构建 工具 
口 webpack: 使 用 非常 流行 的 Webpack 打包 器 (推荐 ) 
口 prowserify: 使 用 Browserify 构建 工具 





NN 








推荐 的 官方 模板 是 webpack 模板 , 它 具 有 使 用 Vue 创建 整个 SPA( 单 页 面 应 用 ) 
人 所 需 的 全 部 功能 。 为 了 达到 本 书 的 目的 ， 我们 将 使 用 webpack-simple 并 逐步 
引入 功能 。 
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想 使 用 其 中 一 个 模板 创建 新 的 应 用 项 目 ， 要 使 用 vue init 命令 : 
vue init <template> <dir> 

我 们 将 在 新 的 demo 文件 夹 中 使 用 webpack-simple 官方 模板 : 
(2) 运行 下 面 的 命令 : 


vue init webpack-simple demo 





这 个 项 目 模板 具有 最 小 可 用 的 Webpack 配置 。 这 条 命令 将 问 几 个 问题 。 
(3) 像 这 样 回答 vue-cli 的 问题 : 


? Project name demo 

? Project description Trying out Vue.js! 
? Author Your Name <your-mail@mail.com> 
? License MIT 

? Use sass? No 





vue-cli 现在 应 该 已 经 创建 了 一 个 demo 文件 严 。 它 已 经 自动 帮 有 我 们 生成 了 一 个 package.json 
文件 和 其 他 配置 文件 。package.json 文件 非常 重要 ， 包 含 这 个 项 目的 主要 信息 。 例 如 ， 它 列 出 了 
项 目 所 依赖 的 所 有 包 。 


(4) 进入 新 创建 的 demo 文件 来 ， 并 安装 在 weppack-simple 模板 添加 的 package.json 文件 
中 声明 的 默认 依赖 (如 Vue 和 Webpack ): 


cd demo 
npm install 











我 们 的 应 用 现在 已 经 设置 好 了 1 
从 现在 开始 , 我 们 将 完全 使 用 ECMAScript 2015 语法 和 import/export 关键 字 
来 使 用 或 暴露 模块 ( 模块 就 是 导出 JavaScript 元 素 的 文件 )。 
4.2.2 创建 应 用 
任何 Vue 应 用 都 需要 一 个 JavaScript 入 口 文件 ， 这 是 代码 开始 的 地 方 。 
(1) 移 除 src 文件 夹 中 的 内 容 。 
(2) 使 用 以 下 内 容 创 建 一 个 新 的 JavaScript 文件 ， 名 为 main.js: 


import Vue from "vue"; 





new Vue ({ 

el: "#app", 

render: h => h("div", "hello world") 
}); 
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首先 , 我 们 将 Vue 核心 库 导入 文件 中 。 然后 创建 了 一 个 新 的 Vue 根 实例 , 该 实例 将 附加 到 页 
面 中 ia 为 app 的 元 素 。 





vue-cli 为 这 个 页 面 提供 了 一 个 默认 的 index.html 文 件 ， 其 中 包含 一 个 空 的 <div 
iqd ="app"></div> 标签 。 你 可 以 根据 喜好 编辑 这 个 页 面 的 HTML。 


最 后 ， 我 们 显示 了 一 个 包含 文本 hello worlg 的 div 元 素 ， 这 要 归功 于 将 在 4.2.3 节 介 绍 
的 render 选项 。 


运行 应 用 
运行 由 vue-cli 生 成 的 npm 脚本 aev， 以 开发 模式 启动 应 用 : 


npm run dev 


这 将 在 一 个 Web 服务 端口 上 启动 Web 应 用 。 终端 应 当 显示 编译 成 功 , 以 及 使 用 什么 URL 访 
问 该 应 用 。 





















































DD Vue App X 
二 G | GO localhost:4000 


hello world 








4.2.3 ” 泻 染 函数 


Vue 使 用 了 一 个 虚拟 DOM 的 实现 ， 用 树 状 结构 的 JavaScript 对 象 来 构建 虚拟 DOM。 然 后 ， 
Vue 将 虚拟 DOM 应 用 到 真实 浏览 器 的 DOM 上 ， 所 用 方法 是 计算 两 者 之 间 的 差异 。 这 尽 可 能 地 
避免 了 DOM 操作 ， 因 为 DOM 操作 通常 是 主要 的 性 能 瓶颈 。 




















实际 上 ， 当 你 使 用 模板 时 ，Vue 会 将 其 编译 成 泻 染 函数 。 如 果 你 需要 JavaScript 
0 的 全 部 功能 和 灵活 性 ， 可 以 自己 直接 编写 泻 染 函数 或 编写 JSX， 后 者 将 在 稍 后 


讨论 。 
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一 个 泻 染 函数 返回 树 的 一 小 部 分 ,也 就 是 特定 于 其 组 件 的 部 分 。 它 会 被 作为 第 一 个 参数 传递 


给 createElement 方法 。 











按照 惯例 ，h 是 createElement 的 别名 ， 这 是 编写 JSX 时 非常 常见 和 必需 的 。 
它 得 名 于 使 用 JavaScript 描述 HTML 的 技术 一 Hyperscript。 


createElement (或 称 h ) 方法 最 多 需要 3 个 参数 ， 如 下 所 示 。 


(1) 第 一 个 参数 是 元 素 的 类 型 。 它 可 以 是 一 个 HTML 标签 名 称 ( 比如 aiv ), 在 应 用 中 注册 过 
的 组 件 名 称 ， 或 者 直接 就 是 一 个 组 件 定义 对 象 。 

(2) 第 二 个 参数 是 可 选 的 。 它 是 一 个 定义 了 属性 、prop、 事 件 监听 器 等 的 数据 对 象 。 

(3) 第 三 个 参数 也 是 可 选 的 。 它 可 以 是 简单 的 纯 文本 ,也 可 以 是 一 个 用 创建 的 其 他 元 素 的 
数组 。 


以 下 面 的 render 函数 为 例 : 


render (h) { 














return h('ul', { 'class': 'movies'}, | 
h('li', { 'class': 'movie'}, 'Star Wars'), 
h('li', { 'class': 'movie'}, 'Blade Runner'), 





它 将 在 浏览 絮 中 输出 以 下 DOM: 


<ul class="movies"> 
<11 class="movie">Star Wars</1i> 
<11 class="movie">Blade Runner</1i> 
> 


我 们 将 在 第 6 章 中 详细 介绍 泻 染 函数 。 


4.2.4 配置 Babel 


Babel 是 一 个 非常 受 欢 迎 的 JavaScript 代码 编译 工具 ,以 便 我 们 在 旧版 和 最 新 的 浏览 器 中 使 用 
新 特性 ( 如 JSX 或 箭头 函数 )。 建 议 在 所 有 正式 的 JavaScript 项 目 中 使 用 Babel。 


默认 情况 下 ,webpack-simple 模板 带 有 默认 的 Babel 配置 。 该 配置 使 用 名 为 env 的 Babel 
预 设 ， 支 持 ES2015 以 来 所 有 稳定 的 JavaScript 版 本 。 它 还 包含 另 一 个 名 为 stage-3 的 Babel 预 
设 ， 支 持 即 将 推出 的 JavaScript 特性， 例如 Vue 社区 中 常用 的 async/await 关键 字 和 对 象 展开 
运算 符 。 

我 们 需要 添加 Vue 特定 的 第 三 个 预 设 ， 这 将 增加 对 JSX 的 支持 〈 我 们 会 在 4.3.2 节 中 需要 它 )。 

我 们 还 需要 包含 Babel 提供 的 polyfil ,以 便 Promise 和 Generator 等 新 特性 可 以 在 旧版 浏览 
中 运行 。 
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实现 这 


昌 
将 


polyfill 是 用 于 检查 特性 在 浏览 器 中 是 否 可 用 的 代码 ; 如 果 不 可 用 ， 它 六 
个 特性 ， 使 其 可 以 像 原生 的 一 样 工作 。 


1. Babel Vue 预 设 
我 们 现在 将 在 应 用 的 Babel 配置 中 安装 并 使 用 pabel-preset-vue。 
(1) 首先 ， 需要 在 开发 依赖 中 安装 这 个 新 的 预 设 : 


npm i -D babel-preset-vue 


主要 的 Babel 配置 是 在 项 目 根 目录 下 已 存在 的 .babelrc JSON 文件 中 完成 的 。 


这 个 文件 可 能 隐藏 在 文件 资源 管理 嚣 中， 具体 取决 于 系统 (文件 名 以 点 开头 )。 
但 是 ， 如 果 你 的 代码 编辑 器 具有 文件 树 视图 的 话 ， 该 文件 应 该 在 其 中 可 见 。 


(2) 打开 这 个 .babelrc 文件 并 将 vue 预 设 添加 到 相应 的 列表 中 : 
{ 


"presets": [ 
["env", { "modules": false}], 
"stage-3", 
"vue" 
] 
} 


























2. polyfill 
我 们 还 要 添加 Babel polyfill， 以 便 在 旧版 浏览 器 中 使 用 新 的 JavaScript 特性 
(1) 在 开发 依赖 中 安装 babel-polyfill 包 : 


npm i -D babe1-polyfi1l1 


(2) 在 sre/main.js 文件 的 开头 将 其 导入 : 


import 'babel-polyfill' 


这 将 为 浏览 器 启用 所 有 必要 的 polyfill。 








O 


4.2.5 更 新 依赖 
为 项 目 搭建 好 脚手架 后 ， 你 可 能 需要 更 新 项 目 使 用 的 包 。 
1. 手动 更 新 
要 检查 项 目 中 使 用 的 包 是 否 有 新 版 本 ， 可 以 在 根 文件 夹 中 运行 以 下 命令 : 


npm outdated 
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如 果 检 测 到 新 版 本 ， 则 会 显示 一 个 表格 。 


wanted 列 中 是 与 packagejson 文件 中 所 指定 版 本 范围 兼容 的 版 本 号 。 要 了 解 更 多 信息 ， 请 
访问 npm 文档 : http://docs.npmjs.com/getting-started/semantic-versioning。 


要 手动 更 新 包 , 请 打开 packagejson 文件 并 找到 相应 的 行 。 更 改版 本 范围 并 保存 文件 。 然后， 
运行 此 命令 以 应 用 更 改 : 


npm install 





























6 不 要 忘记 阅读 你 所 更 新 包 的 更 改 日 志 ! 可 能 会 有 你 希望 了 解 的 破坏 性 改变 或 





改善 。 
2. 自动 更 新 
要 自动 更 新 包 ， 可 以 在 项 目的 根 文件 夹 中 使 用 以 下 命令 : 4 


npm update 


该 命令 只 会 更 新 与 package.json 文件 中 所 指定 版 本 兼容 的 版 本 。 如 果 你 想 将 包 更 
新 为 其 他 版 本 ， 则 需要 手动 执行 。 


3. 更 新 Vue 


更 新 包含 核心 库 的 vue 包 时 ， 你 也 应 该 更 新 vue-template-compiler 包 。 它 是 使 用 
Webpack ( 或 其 他 构建 工具 ) 时 编译 所 有 组 件 模 板 的 包 。 











这 两 个 包 必 须 始 终 处 于 相同 的 版 本 。 例 如 ， 如 果 你 使 用 vue 2.5.3， 那 么 
vue-template-compiler 也 应 该 是 版 本 2.5.3。 


4.2.6 为 生产 而 构建 
想 要 将 你 的 应 用 放 到 在 真正 的 生产 服务 器 上 时 ， 需 要 运行 以 下 命令 来 编译 项 目 : 
npm run build 


默认 情况 下 , 使 用 webpack-simple 模板 时 , 它 会 将 JavaScript 文 件 输出 到 项 目的 /dist 文 件 
夹 中 。 你 只 需要 上 传 此 文件 夹 和 存在 于 根 文件 夹 中 的 index.html 文件 。 你 的 服务 器 上 应 该 有 以 下 
文件 树 : 
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- index.html 
- favicon.png 
.arstd os Burldjg 
L build.map.js 


4.3 单 文件 组 件 
在 本 节 中 ， 我 们 将 介绍 一 种 广泛 用 于 创建 实际 生产 Vue 应 用 的 重要 格式 。 


Vue 具有 自己 的 格式 , 名 为 单 文件 组 件 (SFC)。 该 格式 由 Vue 团队 创建 , 文件 扩展 名 为 .vue。 
它 允 许 你 用 每 一 个 文件 编写 一 个 组 件 , 将 模板 以 及 该 组 件 的 逻辑 和 样式 集中 在 一 个 位 置 。 这 里 的 
主要 优势 在 于 ， 每 个 组 件 都 明显 独立 ， 更 易于 维护 、 易 于 共享 。 


单 文件 组 件 使 用 类 似 HTML 的 语法 描述 Vue 组 件 。 它 可 以 包含 3 种 类 型 的 根 块 : 


口 template>， 使 用 我 们 已 经 用 过 的 模板 语法 描述 组 件 的 模板 ; 
口 <script>, 其 中 包含 组 件 的 JavaScript 代码 ; 
口 <style>， 其 中 包含 组 件 使 用 的 样式 。 


以 下 是 一 个 单 文件 组 件 的 例子 : 


<template> 
<div> 
<p>{{ message }}</p> 
<input v-model="message"/> 
</div> 
</template> 























<script> 
export default { 
data () + 
return { 
message: 'Hello world', 
} 
jh 
} 


</script> 


<style> 
pi 
Color: grey; 
} 
</style> 


现在 就 来 试 试 这 个 组 件 吧 ! 


(1) 在 src 文件 夹 中 新 建 一 个 Test.vue 文件 ， 并 将 上 述 组 件 源 代码 放 入 。 
(2) 编辑 main.js 文件 ， 并 使 用 import 关键 字 导 入 单 文件 组 件 : 
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import Test from './Test.vue' 


(3) 移 除 render 选项 ， 使 用 对 象 展开 运算 符 复 制 Test 组 件 的 定义 : 


new Vue ({ 
el: '#app', 
CL 

} 


在 上 面 的 代码 片段 中 ， 我 演示 了 另 一 种 将 根 组 件 添加 到 应 用 程序 的 方法 : 使 用 
人 JavaScript 展开 运算 符 ， 因 此 . . .App 表达 式 会 将 属性 复制 到 应 用 定义 对 象 。 它 
的 主要 优点 是 ， 在 开发 工具 中 不 再 有 无 用 的 顶层 组 件 ; 它 会 成 为 我 们 的 根 组 件 。 


(4) 继续 ， 打 开 终端 中 显示 的 URL 以 查看 结果 。 








口 Vue App X 
< C | © localhost:4000 


Hello world 





Hello world 











4.3.1 模板 


<template> 标 签 包 含 组 件 的 模板 。 像 之 前 介绍 的 一 样 ， 它 是 带 有 Vue 特殊 语法 ( 指令 、 文 
本 插值 、 简 写 等 ) 的 HTML。 
以 下 是 单 文 件 组 件 中 <template> 标 签 的 示例 : 


<template> 
<ul class="movies"> 





a 








<11 v-for="movie of movies" class="movie"> 
{{movie.title}} 
</1i> 
</ul> 
</template> 


在 这 个 例子 中 ， 组 件 的 模板 由 一 个 ul 元 素 组 成 ， 它 包含 了 显示 电影 标题 的 1i 元 素 列表 。 





如 果 你 没有 在 单 文件 组 件 中 放置 一 个 <template> 标 签 ， 则 要 编写 一 个 泻 染 函 
数 ， 否 则 你 的 组 件 将 无 效 。 





使 用 Pug 








Pug ( 以 前 称 为 Jade ) 是 一 种 编译 到 HTML 的 语言 。 我 们 可 以 在 1ang 属性 设置 为 "pug" 


























可 





<template> 标 签 内 使 用 它 : 


<template lang="pug"> 
ul.movies 
li.movie Star Wars 
li.movie Blade Runner 
</template> 


为 了 能 够 编译 单 文件 组 件 中 的 Pug 代码 ， 我 们 需要 安装 这 些 包 : 

















npm install --save-dev pug pug-loader 


开发 所 需 的 包 称 为 开发 依赖 , 应 该 使 用 --save-dev 标志 进行 安装 。 应 用 运行 需 
要 的 直接 依赖 (例如 ,将 Markdown 编译 为 HTML 的 包 ) 应 该 使 用 --save 标志 
进行 安装 。 

4.3.2 ”脚本 


<script> 标 签 包 含 与 组 件 有 关联 的 JavaScript 代码 。 它 应 该 导出 组 件 定义 对 象 。 


这 是 一 个 <script> 标 签 的 例子 : 


<script> 
export default { 
data ()- { 
return { 





movies: [ 
{title: 'Star Wars'}, 
{title: 'Blade Runner'}, 
], 
ly 
六 
} 


</script> 


在 这 个 例子 中 ,组 件 将 有 一 个 data 钩子 返回 包含 movies 数组 的 初始 状态 。 


人 如 果 你 不 需要 组 件 选项 中 的 任何 选项 (默认 为 空 对 象 )，<script> 标 签 是 可 选 的 。 


JSX 





的 


JSX 是 在 JavaScript 代码 中 用 来 表示 HTML 标记 的 特殊 符号 。 它 使 负责 描述 视图 的 代码 在 更 


接近 纯 HTML 语法 的 同时 ， 仍 具有 JavaScript 的 全 部 功能 。 
以 下 是 使 用 JSX 编写 演 染 函数 的 示例 : 
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<script> 
export default { 
data () { 
return { 
movies: [ 
{title: 'Star Wars'}, 
{title: 'Blade Runner'}, 
| 
} 
} 
render (h) { 
const itemClass = 'movie' 
return <ul class='movies'> 
{this.movies.map (movie => 
<1Li class={ itemClass }>{ movie.title }</1i> 
) } 
</ul> 
je 
} 


</script> 


人 后 你 可 以 在 花 括 号 内 使 用 任何 JavaScript 表达 式 。 





正如 你 在 这 个 例子 中 看 到 的 ， 可 以 使 用 任意 JavaScript 代码 来 组 成 我 们 的 视图 。 我 们 甚至 可 
以 使 用 movies 数组 的 map 方法 为 每 一 项 返回 一 些 JSX。 我 们 还 使 用 了 一 个 变量 来 动态 设置 电影 
元 素 的 CSS 类 。 


在 编译 过 程 中 ， 真 正 发 生 的 事情 是 babel-preset-vue 中 的 一 个 特殊 模块 (名 为 
babel-plugin-transform-vue-jsx ) 将 JSX 代 码 转换 为 纯 JavaScript 代码 。 编 译 之 后 ， 前 面 
的 泻 染 孔 数 将 如 下 所 示 : 


render (h) { 
const itemClass = 'movie' 
return h('ul', { class: 'movies'}, 
this.movies.map (movie => 
h('li', { class: itemClass}, movie.title) 
) 
) 
} 


如 你 所 见 ，JSX 是 一 种 有 助 于 编写 演 染 函数 的 语法 。 最 终 的 JavaScript 代码 将 非常 接近 我 们 
使 用 h (或 createElement ) 手动 编写 的 代码 。 


我 们 将 在 第 6 章 中 更 详细 地 介绍 演 染 函数 。 
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4.3.3 样式 
单 文件 组 件 可 以 包含 多 个 <style> 标 签 ， 以 将 CSS 添加 到 与 此 组 件 相 关 的 应 用 中 。 
下 面 是 一 个 非常 简单 的 组 件 样式 示例 ， 它 将 一 些 CSS 规则 应 用 于 .movies 类 : 


<style> 
.movies { 
list-style: none; 
padding: 12px; 
Backgrounad. gbal(0s ‘OF. 0%. Til} 
border-radius: 3px; 
</style> 


1. 有 作用 域 的 样式 


可 以 使 用 <style> 标 签 的 scoped 属性 将 标签 内 的 CSS 作用 域 限定 在 当前 组 件 中 。 这 意味 
着 这 个 CSS 只 会 应 用 于 这 个 组 件 模 板 里 的 元 素 。 


例如 ， 我 们 可 以 使 用 movie 等 通用 类 名 称 ， 并 确保 它 不 会 与 应 用 的 其 他 部 分 发 生 冲 突 : 


<style scoped> 
.movie:not(:last-child) { 
padding-bottom: 6px; 
margin-bottom: 6px; 
border-bottom: soliqd lpx rgba(0, 0, 0, .1); 
} 
</style> 


结果 将 如 下 所 示 。 














Star Wars 


Blade Runner 

















起 作用 了 , 这 要 归功 于 PostCSS (一 种 处 理工 具 ) 应 用 到 模板 和 CSS 的 一 个 特殊 属性 。 例如， 
思考 以 下 包含 有 作用 域 的 样式 的 组 件 : 
<template> 


<h1 class="title">Hello</h1i> 
</template> 

















<style scoped> 

“已 二 蕊 二 工 
color: blue; 

} 

</style> 
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它 和 以 下 组 件 是 等 价 的 : 


<template> 
<hl class="title" data-v-02ad4e58>Hello</hi1> 
</template> 


<style> 

.title[data-v-02ad4e58] { 
color: blue; 

} 

</style> 


正如 你 所 看 到 的 ， 一 个 独特 的 属性 被 添加 到 了 所 有 模板 元 素 和 所 有 CSS 选择 器 上 ， 以 便 它 
只 匹配 这 个 组 件 的 模板 ， 并 且 不 会 与 其 他 组 件 发 生 冲 突 。 








有 了 有 作用 域 的 样式 并 不 意味 不 再 需要 类 。 由 于 浏览 器 泻 染 CSS 的 方式 ， 选 择 
带 有 属性 的 元 素 时 可 能 会 出 现 性 能 损失 。 例 如 ， 当 样式 作用 域 限定 到 组 件 时 ， 
11 { color: blue; } 会 比 .movie { color: blue; } 慢 许多 倍 。 

2. 添加 预 处 理 器 

现在 ，CSS 很 少 被 直接 使 用 。 普 遍 做 法 是 用 更 强大 、 功 能 更 丰富 的 预 处 理 语言 编写 样式 。 

在 <style> 标 签 上 ， 我 们 可 以 用 1ang 属性 指定 使 用 其 中 一 种 语言 。 

我 们 将 把 这 个 模板 作为 组 件 的 基础 : 


<template> 
<article class="article"> 
<h3 class="title">Title</h3> 
</article> 
</template> 











@ Sass 
Sass 是 许多 科技 公司 使 用 的 著名 CSS 预 处 理 器 。 
(1) 要 在 组 件 中 启用 Sass， 请 安装 以 下 包 : 


npm install --save-dev node-sass sass-loader 


(2) 然后 ， 在 你 的 组 件 中 ， 添 加 一 个 lang 属性 为 "sass "的 <style> 标 签 : 


<style lang="sass" scoped> 
“EtdCLE 
Te 
border-bottom: solid 3px rgbal(red, .2) 
</style> 


(3) 现在 ， 用 vue buila 命令 测试 你 的 组 件 。 应 该 有 一 个 与 下 图 相似 的 结 














口 Vue App X 
去 GC | © localhost:4000 


Title 











人 后 如 果 你 想 使 用 Sass 的 SCSS 语法 变 体 ， 需 要 使 用 lang ="scss"。 


@ Less 
Less 有 比 其 他 CSS 预 处 理 语言 更 简单 的 语法 。 


(1) 要 使 用 Less， 你 需要 安装 以 下 包 : 


npm install --save-dev less less-loader 


(2) 然后 ， 在 你 的 组 件 中 将 1ang 属性 设置 为 "less": 


<style lang="less" scoped> 
-article - 交 
"titleé { 
border-bottom: solid 3px fade(red, 20%); 
了 
} 
</style> 














©® Stylus 
Stylus 比 Less 和 Sass 更 年 轻 ， 也 很 受 欢迎 。 


(1) 最 后 ， 对 于 Stylus 来 说 ， 你 需要 这 些 包 : 


npm install --save-dev stylus stylus-loader 











(2) 在 <style> 标 签 上 , 将 lang 属性 设置 为 "stylus": 


<style lang="stylus" scoped> 
.article 
.title 
border-bottom solid 3px rgbal(red, .2) 
</style> 


4.3.4 组 件 内 的 组 件 
既然 知道 了 如 何 编写 一 个 单 文件 组 件 ， 我 们 希望 在 其 他 组 件 中 使 用 它们 来 组 成 应 用 的 界面 。 
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要 在 男 一 个 组 件 中 使 用 组 件 ， 我 们 需要 导入 它 并 将 它 暴 露 在 模板 中 。 
(1) 首先 ， 创 建 一 个 新 组 件 。 例 如 ， 这 是 一 个 Movie.vue 组 件 : 


<template> 
<11 class="movie"> 
{{movie.title}} 
</1i> 
</template> 





<script> 

export default { 
props: ['movie'], 

} 


</script> 


<style scoped> 
.movie:not(:last-child) { 
padding-bottom: 6px; 
margin-bottom: 6px; 
border-bottom: solid lpx rgba(0, 0, 0, .1); 
} 
</style> 


如 果 尚 未 创建 的 话 ， 那 么 还 需要 一 个 Movies .vue 组 件 。 它 应 该 是 这 样 的 : 


<template> 
<ul class="movies"> 








<11 v-for="movie of movies" class="movie"> 
{{movie.title}} 
/LE 
TL 
</template> 


<script> 
export default { 
data () { 
return { 
movies: [ 
{id: 0, title: 'Star Wars'}, 
{id: 1, title: 'Blade Runner'}, 
ly 
} 
} 
} 


</script> 


(2) 然后 ， 在 Movies 组 件 的 脚本 中 导入 Movie 单 文件 组 件 : 


<script> 
import Movie from './Movie.vue' 





export default { 





</script> 


(3) 使 用 对 象 〈 键 是 我 们 将 在 模板 中 使 用 的 名 称 ， 值 是 组 件 定义 ) 设置 components 选项 ， 
将 一 些 组 件 暴 露 给 模板 : 


export default { 
components: { 
Movie, 
// 相当 于 `Movie: Movie,、 
J 






































pA 
} 


(4) 我 们 现在 可 以 在 模板 中 通过 <Movie> 标 签 使 用 这 个 组 件 : 


<template> 
<ul class="movies"> 
<Movie v-for="movie of movies" 
:key="movie.id" 




















:movie="movie" /> 
</ul> 
</template> 


如 果 你 在 使 用 JSX, 则 不 需要 components 选项 。 这 是 因为 如 果 以 大 写字 母 开头 , 则 可 以 直 
接 使 用 组 件 定 义 : 


import Movies from './Movies.vue'! 





export default { 
render (h) { 
return <Movies/> 
// 无 须 通 过 components 选项 注册 Movies 
} 
} 


4.4 小 结 


在 本 章 中 , 我 们 安装 了 几 个 工具 , 使 我 们 能 够 使 用 推荐 的 方法 编写 一 个 真正 可 用 于 生产 环境 
的 应 用 。 现 在 , 我 们 可 以 搭建 整个 项 目 框 架 , 开始 构建 出 色 的 新 应 用 了 。 我们 可 以 用 各 种 方式 编 
写 组 件 ， 比 如 单 文件 组 件 这 样 清晰 和 可 维护 的 方式 。 我 们 可 以 在 应 用 或 其 他 组 件 内 部 使 用 这 些 组 
件 ， 来 构建 具有 多 个 可 复 用 组 件 的 用 户 界面 。 


在 下 一 章 中 , 我 们 将 用 目前 学 到 的 知识 构建 第 三 个 应 用 , 还 会 介绍 一 些 新 的 主题 , 比如 路 由 ! 

































































项 目 3: 支持 中 心 

















在 本 章 中 , 我 们 将 使 用 路 由 系统 构建 一 个 更 为 复杂 的 应 用 程序 ( 这 意味 着 有 多 个 虚拟 页 面 )， 
作为 一 家 名 为 My Shirt Shop 的 虚构 公司 的 支持 中 心 。 它 将 包含 两 个 主要 部 分 : 


口 一 个 FAQ (常见 问题 解答 ) 页 面 ， 包 含 几 个 问题 和 答案 ; 
口 一 个 支持 工 单 管理 页 面 ， 用 户 能 够 在 此 显示 和 创建 新 的 工 单 。 


这 个 应 用 将 具有 一 个 认证 系统 ， 允 许 用 户 创 建 账户 或 登录 。 


我 们 将 首先 创建 一 些 基本 路 由 , 然后 整合 这 个 账户 系统 来 完成 关于 路 由 的 更 高 级 主题 。 本 章 
中 ， 我 们 将 尽 可 能 复 用 代码 并 应 用 最 佳 实践 。 














5.1 通用 应 用 结构 
作为 开头 ， 我 们 将 创建 项 目 结构 ， 并 了 解 有 关 路 由 和 页 面 的 更 多 信息 。 





5.1.1 项 目 设置 

为 了 设置 项 目 ， 需 要 遵循 以 下 步骤 。 

(1) 首先 ， 用 vue init webpack-simple <folder> 命 令 生 成 一 个 Vue 项 目 ， 就 像 我 们 在 
第 4 章 中 所 做 的 那样 : 

vue init webpack-simple support-center 

cd support-center 


npm install 
npm install --save babel-polyfill 


(2) 安装 编译 Stylus 代码 所 需 的 包 (我们 的 样式 将 使 用 Stylus 编写 ): 























口 stylus 





DQ stylus-loader 


110 第 5 章 项 目 3: 支持 中 心 





npm install --save-dev stylus stylus-loader 


赖 中 。 
(3) 移 除 src 文件 夹 中 的 内 容 ， 我 们 将 在 其 中 放置 应 用 的 所 有 源 代码 。 
(4) 然后 创建 一 个 mainjs 文件 ， 包 含 创建 Vue 应 用 所 需 的 代码 : 


import 'babel-polyfill' 
import Vue from 'Vue' 


6 别 忘 了 使 用 --save-dev 标志 将 开发 工具 包 保 存在 package.json 文件 的 开发 依 





new Vue ({ 
el: '#app', 
render: h => h('div', 'Support center'), 


}) 
你 现在 可 以 尝试 使 用 npm run dev 命令 运行 应 用 了 ! 


(5) 这 个 应 用 的 大 部 分 样式 已 经 准备 好 了 。 下 载 本 章 的 源 代码 文件 ( 文件 夹 名 为 chapter5- 
download ) 并 将 Stylus 文件 解压 缩 到 src 目录 下 的 style 文件 夹 中 。 并 且 解 压 assets 文件 夹 。 





5.1.2 ”路 由 和 页 面 
我 们 的 应 用 将 分 为 6 个 主要 页 面 : 
口 主页 
口 公共 FAQ 页 面 
口 登录 页 面 
口 工 单 页 面 
口 发 送 新 工 单 的 页 面 
口 显示 工 单 详情 和 对 话 的 页 面 


路 由 是 表示 应 用 state 的 路 径 , 通常 以 页 面 的 形式 显示 。 每 个 路 由 都 与 一 个 URL 模式 相关 联 ， 
后 者 在 地 址 匹配 时 触发 路 由 。 然 后 ， 相 应 的 页 面 将 呈现 给 用 户 。 


1. Vue 插件 


为 了 在 我 们 的 应 用 中 启用 路 由 , 需要 一 个 名 为 vue-router 的 官方 Vue 插件 。Vue 插件 是 一 
些 旨 在 向 Vue 库 添加 更 多 功能 的 JavaScript 代码 。 你 可 以 在 npm 注册 中 心 找 到 很 多 插件 。 我 推荐 
awesome-vue GitHub 仓库 ， 它 将 插件 按 类 别 排列 。 

(1) 在 项 目 目录 中 使 用 以 下 命令 从 npm 下 载 vue-router 包 : 


npm install --save vue-router 
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我 们 需要 在 main.js 文件 旁边 创建 新 文件 routerjs， 并 把 所 有 与 路 由 有 关 的 代码 放 进 去 。 然 
后 ， 用 全 局 的 Vue .use() 方 法 安装 想 要 使 用 的 插件 (在 本 例 中 是 vue-router )。 


(2) 创建 routerjs 文件 ， 并 从 相应 的 包 中 导入 vue 库 和 VueRouter 插件 : 


import Vue from 'Vue' 
import VueRouter from 'vue-router' 


(3) 然后 将 该 插件 安装 到 Vue 中 : 

Vue.use (VueRouter) 

vue-router 插件 现在 已 经 可 以 使 用 了 ! 

2. 使 用 vue-router 创建 第 一 个 路 由 

在 本 节 中 ， 我 们 将 展示 在 Vue 应 用 中 设置 路 由 所 需 的 步骤 。 

@ 使 用 router-view 进行 布局 

在 添加 路 由 之 前 ， 我 们 需要 为 应 用 设置 一 个 布局 。 这 是 将 要 演 染 路 由 组 件 的 地 方 。 


(1) 在 src 目录 中 新 建 一 个 components 文 件 夹 , 并 在 文件 夹 中 创建 一 个 名 为 AppLayout .vue 
的 组 件 。 


(2) 编写 组 件 的 模板 一 一 一 个 <div> 元 素 ， 其 中 内 栎 一 个 包含 图 像 和 一 些 文字 的 <header> 元 
素 。 然 后 ， 在 <header> 之 后 添加 一 个 <-router-view /> 组 件 : 


<template> 
<div class="app-layout"> 
<header class="header"> 
<div><img class="img" 




































































src="../assets/logo.svg"/></div> 
<div>My shirt shop</div> 
</header> 


<!-- 菜单 将 放 在 这 里 --> 
<router-view /> 
</div> 
</template> 


<router-view /> 组 件 是 由 vue-router 插件 提供 的 一 个 特殊 组 件 ， 它 将 演 染 匹配 当前 路 
由 的 组 件 。 它 不 是 一 个 真正 的 组 件 ， 因 为 它 没有 自己 的 模板 ， 并 且 不 会 出 现在 DOM 中 。 


(3) 在 模板 之 后 添加 一 个 <style> 标 签 ,从 先前 在 5.1.1 节 中 下 载 的 styles 文件 夹 导 和 人 主 Stylus 
文件 。 别 忘记 使 用 lang 属性 指定 我 们 正在 使 用 stylus : 
<style lang="stylus"> 


@import '../style/main'; 
</style> 
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(4) 因为 单 文件 组 件 中 可 以 有 任意 多 个 <style> 标 签 ， 所 以 添加 另 一 个 <style> 标 签 ， 但 这 
次 要 限定 范围 。 我 们 将 在 第 二 个 <style> 标 签 中 指定 heagder logo 的 大 小 : 


<style lang="stylus" scoped> 
.header { 
.img { 
width: 64px; 
height: 64px; 
} 
} 
</style> 





i 为 了 提高 性 能 ， 建 议 在 范围 样式 中 使 用 class。 


我 们 已 经 准备 好 将 布局 组 件 放 到 应 用 中 了 ! 
(5) 在 main.js 文件 中 ,将 其 导入 并 泻 染 在 Vue 根 实例 上 : 


import AppLayout from './components/AppLayout .vue' 


new Vue ({ 

el: '#app', 

render: h => h(AppLayout), 
}) 


我 们 现在 还 无 法 启动 应 用 ， 因 为 还 没有 完成 路 由 ! 


如 果 查 看 浏览 器 的 控制 台 , 你 可 能 会 看 到 一 条 错误 消息 , 抱怨 缺少 <router-view /> 
和 组 件 。 这 是 因为 我 们 没有 导入 在 Vue 中 安装 vue-router 插件 的 router.js 文件 ， 
所 以 应 用 中 还 没有 包含 该 代码 。 


@ 创建 路 由 
让 我 们 为 测试 路 由 创建 几 个 页 面 。 


(1) 在 components 文件 夹 中 创建 一 个 Home .vue 组 件 ， 其 中 包含 一 个 带 有 <main> 元 素 、 标 
题 和 一 些 文本 的 简单 模板 : 


<template> 
<main class="home"> 
<hl>Welcome to our support center</h1l> 
<p> 
We are here to help! Please read the <a>F.A.Q</a> first, 
and if you don't find the answer to your question, <a>send 
us a ticket!</a> 
</p> 
</main> 
</template> 
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(2) 然后 ， 在 Home .vue 旁边 创建 一 个 FAQ .vue 组 件 。 它 也 应 该 包含 一 个 -main> 元 素 ， 你 
可 以 在 其 中 添加 一 个 简单 的 标题 : 


<template> 
<main class="faq"> 
<hl>Frenquently Asked Questions</h1> 
</main> 
</template> 


现在 我 们 有 了 创建 几 个 路 由 所 需 的 组 件 。 
(3) 在 routerjs 文件 中 ， 导 入 刚刚 创建 的 两 个 组 件 : 


import Home from './components/Home.vue' 
import FAO from './components/FAQ.vue' 


(4) 然后 ， 创 建 一 个 routes 数组 : 
const routes = | 


// 路 由 将 放 在 这 里 
] 


路 由 是 包含 路 径 、 名 称 和 要 泻 染 组 件 的 对 象 : 


{ path: '/some/path', name: 'my-route', component: ... } 

















这 个 路 径 是 激活 当前 路 由 所 需要 匹配 的 URL 模式 。 这 个 组 件 将 泻 染 在 特殊 的 <router- 
view /> 组 件 中 。 





路 由 名 称 是 可 选 的 ,但 我 强烈 建议 使 用 它 。 它 允许 你 指定 路 由 的 名 称 而 不 是 路 径 ， 5 
以 便 在 移动 和 更 改 路 由 时 不 会 导致 链接 失效 。 


(5) 记 住 了 这 一 点 ， 我 们 现在 可 以 在 routes 数组 中 添加 两 个 路 由 : 


const routes = [ 
{ path: '/', name: 'home', component: Home }, 
{ path: '/faq', name: 'faq', component: FAQO }, 
] 


让 我 们 思考 一 下 它 会 做 些 什么 : 

口 当 浏 览 器 URL 是 http://localhost:4000/ 时 ，Home .vue 组 件 将 被 泻 染 ; 
口 当 URL 是 http:/localhost:4000/faq/ 时 ， 将 显示 Fao.vue 组 件 。 

@ 路 由 器 对 象 


随 着 路 由 准备 就 绪 ， 我 们 需要 创建 一 个 router 对 象 来 为 我 们 管理 路 由 。 我 们 将 使 用 
vue-router 包 中 的 VueRouter 构造 函数 。 它 需要 一 个 options 对 象 作为 参数 。 现 在 我 们 要 
使 用 routes 参数 。 
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(1) 在 routerjs 文件 中 的 routes 数组 之 后 ,创建 一 个 新 的 router 对 象 , 并 指定 routes 参数 : 


Const router = new VueRouter({ 
routes, 
安装 的 这 个 插件 也 是 路 由 器 的 构造 函数 ,所 以 我 们 使 用 相同 的 VueRoutet 变量 。 
人 VueRouter 实际 上 是 一 个 有 效 的 Vue 插件 , 因为 它 有 一 个 install 方法 ,我 们 
将 在 本 章 创 建 自己 的 插件 ! 


(2) 导出 router 对 象 作为 模块 的 默认 导出 值 : 


export default router 


(3) 现在 回 到 main.js 文 件 ,我 们 需要 为 Vue 应 用 提供 路 由 器 对 象 .导入 我 们 刚 创建 的 router: 


import router from './router' 


(4) 然后 将 其 作为 一 个 定义 选项 添加 到 Vue 根 实例 中 : 


new Vue ({ 
el: '#app', 
render: h => h(AppLayout), 
// 将 路 由 器 提供 给 应 用 
router, 


}) 


这 就 是 让 路 由 能 够 工作 所 需要 的 所 有 操作 ! 你 现在 可 以 尝试 将 浏览 右 中 的 URL 更 改 为 
http://localhost:4000/##/ 或 http://localhost:4000/#/faq， 每 次 都 会 获得 不 同 的 页 面 : 




















a |LGumeaumeGHaAu | 一 
区 D vue App x We 
€ GC © localhost:4000/faq 1 
| Elements Console Vue Sources Network Performance Memory Application Security Audits 2 
也 Ready. Detected Vue 2.4.1 人 Components 名 Vuex 党 Events C Refresh 
Q Fiktercomponent FAQ> @ InspectDOM Q Fit 
v <AppLayout 
<FAQ> = swme router-view: /faq data 
» Sroute: Object 
» questionList: Array[5] 
remoteDataLoading: 9 ~ 
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不 要 忘记 URL 中 的 # 字 符 。 在 不 改变 真实 网 页 的 情况 下 伪造 路 由 更 改 时 ， 它 是 
9 必需 的 。 这 是 默认 的 路 由 器 模式 ， 称 为 hash。 该 模式 可 以 与 任何 浏览 器 和 服务 
器 一 起 使 用 。 
@ 路 由 模式 
我 们 可 以 在 构造 器 选项 中 使 用 modae 参数 更 改 路 由 需 模式 ， 可 以 是 hash (默认 )、history 
或 abstract。 
hash 模式 是 我 们 已 经 在 使 用 的 默认 模式 。 这 是 “最 安全 ”的 选择 ， 因 为 它 与 任何 浏览 器 和 
服务 器 都 兼容 。 它 使 用 URL 的 hash 部 分 ( 指 # 符 号 后 面 的 部 分 ), 并 对 其 进行 更 改 或 响应 其 变化 。 
最 大 的 好 处 是 ， 改 变 hash 部 分 不 会 改变 应 用 运行 的 真实 网 页 ( 改变 真实 网 页 是 非常 不 好 的 )。 显 
而 易 见 的 缺点 则 是 ， 它 迫使 我 们 使 用 不 那么 优雅 的 # 符 号 将 URL 分 成 两 部 分 。 
感谢 HTML5 的 history.pushSstateAPI, 我 们 可 以 摆脱 这 个 # 符 号 , 并 为 应 用 获得 一 个 真 
实 的 URL! 我 们 需要 在 构造 函数 中 将 模式 更 改 为 history: 


Const router = new VueRouter!({ 
routes, 







































































mode: 'history', 
}) 
现在 可 以 在 我 们 的 单 页 应 用 中 使 用 诸如 http://localhost:4000/faq 等 优雅 的 URL 了 ! 但 有 如 下 
两 个 问题 。 


口 浏览 需 需 要 支持 这 个 HTML5 API， 这 意味 着 它 不 能 在 Internet Explorer 9 或 更 低 版 本 上 工 
作 ( 所 有 其 他 主流 浏览 器 都 已 经 支持 它 一 段 时 间 了 )。 
口 服务 器 必须 配置 为 当 访 问 诸 如 /fag 之 类 的 路 由 时 发 送 主 页 而 不 是 抛 出 404 错误 ， 因为 它 
并 不 真正 存在 (没有 名 为 faq.html 的 文件 )。 这 也 意味 着 我 们 将 不 得 不 自己 实现 404 页 面 。 

值得 庆幸 的 是 ，vue puila 使 用 的 Webpack 服务 器 被 配置 为 默认 支持 此 功能 。 所 以 你 可 以 
继续 尝试 这 个 新 的 URL: http:Wlocalhost:4000/faql 

第 三 种 模式 称 为 abstract， 可 以 在 任何 JavaScript 环境 中 使 用 (包括 Node.js )。 如 果 没 有 
可 用 的 浏览 需 API， 路 由 器 将 被 迫使 用 此 模式 。 

3. 创建 导航 菜单 

在 应 用 中 加 入 适当 的 导航 菜单 而 不 是 手动 输入 网 址 将 会 很 棒 ! 让 我 们 在 components 文件 夹 
中 创建 一 个 新 的 NavMenu.vue 文件 : 

<template> 


<nav class="menu"> 


<!-- 链接 在 这 里 --> 
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</nav> 
</template> 
接 下 来 ,将 它 添加 到 布局 中 。 在 AppLayout 中 导入 新 组 件 : 
<script> 
import NavMenu from './NavMenu.vue' 


export default { 
components: { 
NavMenu, 
D3 
} 


</script> 


然后 将 其 添加 到 AppLayout 模板 中 : 


<header class="header"> 





<div><img class="img" src="../assets/logo.svg"/></div> 
<div>My shirt shop</div> 
</header> 


<NavMenu /> 
@ 路 由 器 链接 


vue-router 插件 为 我 们 提供 了 男 一 个 方便 的 特殊 组 件 <router-1ink>。 当 这 个 组 件 
被 点 击 时 ， 就 会 变 为 指定 路 由 ， 这 要 归功 于 它 的 to prop。 默 认 情 况 下 ， 它 将 是 一 个 HTML <a> 
元 素 , 但 可 以 使 用 tag prop 来 自 定义 。 

例如 ，FAQ 页 面 的 链接 是 : 


<router-link to="/faq">FAQ</router-link> 
to prop 也 可 以 使 用 包含 name 属性 的 对 象 而 不 是 路 径 : 
<router-link :to="{ name:'faq' }">FAQ</router-link> 


这 将 动态 地 为 路 由 生成 正确 的 路 径 。 我 建议 使 用 第 二 种 方法 ， 而 不 是 只 指定 路 径 一 一 这 样 ， 
如 果 更 改 路 由 的 路 径 ， 导 航 链接 仍然 可 以 工作 。 








当 使 用 对 象 记 法 时 ， 不 要 忘记 用 v-bind 或 者 :简写 来 绑 定 to prop ， 否 则 
router-link 组 件 会 得 到 一 个 字符 串 ， 并 且 不 会 理解 它 是 一 个 对 象 。 


现在 可 以 添加 链接 到 NavMenu 组 件 了 : 


<template> 
<nav class="menu"> 
<router-link :to="{ name:'home' }">Home</router-link> 
<router-link :to="{ name:'faq' }">FAQO</router-link> 
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</nav> 
</template> 


你 现在 应 该 在 应 用 中 有 了 一 个 可 以 工作 的 菜单 。 








|LGuimaumaeGHAU | 一 G5 
多 口 vue App x 
€ GC | © localhost:4000 |! 
Home FAQ 


Welcome to our support center 


We are here to help! Please read the FA.Q first, and if you don't find the answer to your question, send us a ticket! 

















© active class 


路 由 需 链 接 在 与 其 关联 的 路 由 当前 处 于 激活 状态 时 获取 active class。 默 认 情 况 下 ， 组 件 使 用 
router-link-active CSS 类 ， 因 此 你 可 以 相应 地 更 改 其 视觉 效果 。 


(1) 在 我 们 的 NavMenu .vue 组 件 中 ,使 用 Stylus 声明 一 些 有 作用 域 的 样式 来 给 激活 链接 添加 
底部 边框 : 


<style lang="stylus" scoped> 
@import '../style/imports'; 


.router-link-active { 
border-bottom-color: S$primary-color; 

} 

</style> 


我 们 使 用 的 Sprimary-color 变量 来 自 eimport '../style/imports'; 语 句 ， 
后 者 导入 了 包含 Stylus 变量 的 imports.styl 文件 。 
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9 事情 发 生 。 如 果 跳 转 到 Home 页 面 , 它 


| 

蜡 

于 
jn 





如 果 现 在 尝试 运行 应 用 , 你 会 发 现 菜单 里 有 些 奇 人 
会 按 预 期 工作 。 








Home FAQ 


Welcome to 


























但 是 当 你 进入 FAQ 页 面 时 ，Home 和 FAQ 链接 都 会 高 亮 显示 。 





Home FAQ 


Frequently 

















这 是 因为 在 默认 情况 下 ，active class 匹配 行为 是 包容 的 ! 这 意味 着 如 果 路 径 为 /faG 或 以 
/fadq/ 开 头 ，<router-link to ="/fag"> 都 将 获得 active class。 但 是 这 也 意味 着 如 果 当 前 路 
径 以 /开头 ,那么 <router-link to ="/"> 都 将 得 到 该 class， 这 包括 了 所 有 可 能 的 路 径 ! 这 就 
是 为 什么 我 们 的 首页 链接 将 永远 得 到 这 个 class。 

为 了 防止 发 生 这 种 情况 ， 有 一 个 exact prop， 它 是 个 布尔 值 。 如 果 设 置 其 为 true， 则 仅 在 
当前 路 径 完全 匹配 时 ， 链 接 才 能 获得 active class。 


(2) 将 exact 属性 添加 到 Home 链接 上 


<router-link :to="{ name:'home' }" exact>Home</router-link> 















































现在 ， 应 该 只 有 FAQ 链接 被 高 之 显示 了 。 








Home FAQ 





Frequently 
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5.2 FAQ 一 一 使 用 API 


在 本 节 中 ， 我们 将 创建 FAQ 页 面 ， 它 会 从 服务 器 获取 数据 。 它 将 显示 一 个 加 载 动画 ， 然 后 
显示 问题 和 答案 的 列表 。 








5.2.1 服务 器 设置 

这 是 我 们 将 与 服务 器 进行 通信 的 第 一 个 应 用 。 你 将 获得 一 个 具有 现成 API 的 服务 器 。 

你 可 以 下 载 服务 器 文件 ( 见 chapter5-download ), 将 它们 解压 缩 到 应 用 之 外 的 其 他 文件 夹 中 ， 
并 运行 以 下 命令 来 安装 依赖 并 启动 服务 器 : 


cd _ server_folder 
npm install 
npm start 


你 现在 应 该 有 一 个 服务 器 运行 在 3000 端口 上 。 完 成 此 操作 后 ， 可 以 使 用 真正 的 后 端 继续 构 
建 应 用 了 ! 



































5.2.2 使 用 fetch 


在 FAo.vue 单 文件 组 件 中 ， 我 们 将 使 用 Web 浏览 器 的 标准 fetch API 从 服务 器 获取 问题 。 
这 个 请 求 将 是 一 个 到 http://localhost:3000/questions 的 简单 GET 请 求 , 没有 身份 验证 。 每 个 问题 对 
象 都 有 title 和 content 字段 。 


(1) 打开 Fao.vue 并 在 组 件 脚 本 中 添加 questions 数据 属性 ， 它 将 保存 从 服务 器 中 获取 的 
问题 数组 。 我 们 还 需要 一 个 error 属性 来 显示 网 络 请 求 期 间 的 报错 消息 : 


<script> 
export default { 
data () { 
return { 
questions: []， 
error: null, 
} 
lj} 
} 


























</script> 
(2) 现在 我 们 可 以 通过 v-for 循环 向 模板 添加 问题 和 答案 ， 以 及 以 下 错误 消息 : 
<template> 


<main class="faq"> 
<h1l>Fregquently Asked Questions</h1> 


<div class="error" Vv-if="error"> 
Can't load the questions 
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</div> 


<section class="list"> 
<article v-for="gquestion of questions"> 
<h2 v-html="gquestion.title"></h2> 
<p v-html="question.content"></p> 
</article> 
</section> 
</main> 
</template> 


我 们 已 经 准备 好 获取 数据 了 ! fetch API 是 基于 Promise 的 ， 使 用 起 来 非常 简单 。 以 下 是 
fetch 用 法 的 示例 : 


fetch(url) .then(response => { 
if (response.ok) { 
// 返回 一 个 新 的 Promise 
return response.json() 
} else { 
return Promise.reject('error') 
} 
}) .then(result => { 


// 成 功 

console.log('JSON:', result) 
}) -Gatey(e es 

// 失败 


console.error (e) 


二 





我 们 首先 调用 fetcn， 第 一 个 参数 是 请 求 的 URL。 这 返回 了 一 个 带 有 response 对 象 的 
Promise， 该 对 象 包 含有 关 请 求 结果 的 信息 。 如 果 成 功 , 我 们 使 用 response.json()， 它 返回 带 
有 JSON 解析 结果 对 象 的 新 Promise。 


当 路 由 匹配 时 ， 请 求 将 在 组 件 创 建 后 立即 在 内 部 生成 。 这 意味 着 你 应 该 在 组 件 定义 中 使 用 
created 生命 周期 钓 子 : 


data () { 
A 
}, 
created () { 
// 在 这 里 fetch 
}, 





























如 果 一 切 顺利 ,我们 将 使 用 JSON 解析 结果 设置 suestions 属性 。 否 则 ,将 显示 一 条 错误 
消息 。 


(3) 使 用 正确 的 URL 调用 fetcn: 


created () { 
fetch('http://localhost:3000/gquestions') 
和 
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(4) 添加 带 有 response 对 象 的 第 一 个 then 回调 函数 : 


fetch('http://localhost:3000/gquestions') .then(response => { 
if (response.ok) { 
return response.json() 
} else { 
return Promise.reject('error') 


} 








} 


(5) 因为 response.json() 返 回 了 一 个 新 的 Promise， 所 以 需要 男 一 个 then 回调 函数 : 


// 

}) .then(result => { 
// 结果 是 来 自 服务 器 的 JSON 解析 而 成 的 对 象 
this.questions = result 

} 


(6) 最 后 ， 我 们 捕获 所 有 可 能 的 错误 以 显示 错误 消息 : 


A 
}).catch(e => { 
this.error = e 


} 


以 下 是 created 钩子 的 概要 : 


created () { 
fetch('http://localhost:3000/gquestions') .then(response => { 
if (response.ok) { 
return response.json() 
} else { 
return Promise.reject('error') 
} 
}) .then(result => { 
this.questions = result 
}) .catch(e => { 
this.error = e 


} 









































} 


我 们 可 以 使 用 JavaScript 关键 字 async 和 await 重 写 这 上 段 代 码 ， 使 其 看 起 来 像 同步 执行 的 
代码 : 


async created () { 
try { 
const response = await fetch('http://localhost:3000/questions') 
if (response.ok) { 
this.questions = 
} else { 
throw new Error('error') 
} 
} catch (e) { 


await response.json() 
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this.error = e 





现在 尝试 这 个 页 面 ， 应 当 显 示 问 题 和 答案 的 列表 。 





Frequently Asked Questions 


Why wont my discount code work? 


Inventore iste reprehenderit aut reiciendis repellendus. Quas cumque aliquam accusantium et itaque quisquam 
voluptatem. Commodi quo quia occaecati dicta ratione qui at tempore. At saepe est et Saepe accusamus voluptates. 


How do i return an item? 


Voluptate cupiditate officia quia accusantium. Fugiat ut praesentium quia ut et labore reiciendis fugit. Voluptas eos 
maiores itaque aut. Sequi harum dolor neque sunt rerum iste ducimus. Quas sapiente cumque voluptatem 
repudiandae ipsum. Natus quis aut aut fugiat. Nisi non sed reprehenderit mollitia commodi et qui error. Velit autem 
omnis et repellendus facere libero praesentium. Sit aut possimus eligendi consectetur beatae. Iste et officia delectus 
modi ratione inventore enim voluptatem. 














为 了 查看 错误 管理 能 否 正常 工作 ,可 以 转 到 服务 器 运行 的 控制 台 并 停止 它 ( 例如 ,使 用 Ctrl+C 
快捷 键 )。 然 后 ， 你 可 以 重新 加 载 应 用 ， 应 该 会 显示 以 下 错误 消息 。 











Frequently Asked Questions 


@ Cantloadthe questions 








加 载 动画 
还 有 最 后 一 件 遗 漏 的 事情 一 一 我 们 应 该 显示 一 个 加 载 动画 , 通知 用 户 正 在 进行 一 项 操作 , 而 


不 是 显示 空白 屏幕 。 为 了 实现 这 个 效果 ， 服 务 器 伪造 /questions 请 求 的 1.5 秒 延迟 ， 以 便 我 们 
可 以 轻松 地 看 到 加 载 动画 。 


由 于 要 在 多 个 组 件 中 显示 加 载 动画 ， 因 此 我 们 将 创建 一 个 新 的 全 局 组 件 。 
(1) 在 components 文件 夹 中 ， 使 用 以 下 模板 创建 一 个 新 的 Loading.vue 文件 : 
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<template> 
<div class="loading"> 
<div></div> 
</div> 
</template> 


(2) 在 main 文件 夹 中 的 main.js 文件 旁 创建 一 个 新 的 global-componentsjs 文件 。 在 这 个 文件 
我 们 将 使 用 Vue .component () 方 法 全 局 地 注册 Loading 组 件 : 


import Vue from 'vue' 
import Loading from './components/Loading.vue' 





Vue.component ('Loading', Loading) 
0 我 们 将 在 这 个 文件 中 注册 应 用 中 使 用 的 所 有 全 局 组 件 。 


(3) 然后 ， 在 main.js 文件 中 导入 global-components .js 模块 : 





import './global-components' 


(4) 回 到 Fao.vue 组 件 ， 我 们 需要 一 个 新 的 10ading 布尔 数据 属性 来 切换 动画 的 显示 : 


data () { 
return { 
questions: []， 
error: null, 
loading: false, 


} 








} 
(5) 在 模板 中 ， 添 加 加 载 动画 : 
<Loading v-if="loading" /> 


(6) 最 后 , 修改 一 下 created 钩子 , 在 开始 的 时 候 设 置 loading 为 true; 当 一 切 都 完成 时 ， 
设置 为 false: 











async createqd () { 
this.loading = true 
te 


const response = await 
fetch('http://localhost:3000/questions') 
po 
} catch (e) { 
iS EO 三 -站 
} 
this.loading = false 


} 


现在 重新 加 载 页 面 ， 可 以 看 到 在 问题 出 现 之 前 有 简短 的 加 载 动画 。 
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Frequently Asked Questions 











5.2.3 用 自己 的 插件 扩展 Vue 


由 于 将 在 应 用 的 多 个 组 件 中 使 用 fetch, 并 且 和 希望 尽 可 能 复 用 代码 , 所 以 在 所 有 组 件 上 最 好 
有 一 个 方法 能 够 使 用 预定 义 的 URL 向 服务 器 发 出 请 求 。 


这 是 一 个 自 定 义 Vue 插件 的 好 例子 ! 别 担心 ， 编 写 插件 其 实 很 简单 。 
1. 创建 一 个 插件 


要 创建 插件 , 只 有 一 个 规则 一 一 插件 应 该 是 一 个 带 有 instal1 方法 的 对 象 , 该 方法 接收 Vue 
构造 函数 作为 第 一 个 参数 以 及 一 个 可 选 的 options 参数 。 然 后 ， 该 方法 将 通过 修改 构造 函数 为 
框架 添加 新 特性 。 


(1) 在 src 文件 夹 中 创建 一 个 新 的 plugins 文件 夹 。 

(2) 在 plugins 文件 夹 中 创建 一 个 fetch.js 文件 ， 我 们 将 在 其 中 编写 插件 。 在 这 个 例子 中 ， 我 
们 的 插件 将 在 所 有 组 件 上 添加 一 个 新 的 Sfetch 特殊 方法 。 我们 将 通过 改变 Vue 的 原型 来 做 到 这 
一 点 Le 

(3) 让 我 们 通过 导出 一 个 带 有 install 对 象 的 方法 ， 尝 试 创建 一 个 非常 简单 的 插件 : 

export default { 

install (Vue) { 
console.log('Installed!') 


} 
} 


这 样 就 完成 了 ! 我 们 创建 了 一 个 Vue 插件 ! 现在 ,需要 将 其 安装 到 我 们 的 应 用 中 。 
(4) 在 main.js 文 件 中 导入 这 个 插件 ,然后 像 我 们 为 vue-router 所 做 的 那样 调用 vue .use () 
方法 : 


import VueFetch from './plugins/fetch' 
Vue.use (VueFetch) 


你 现在 应 该 能 在 浏览 带 控 制 台 中 看 到 消息 Installed!。 















































5.2 FAQ 一 一 使 用 API 


125 





2. 插件 选项 
我 们 可 以 使 用 options 参数 配置 插件 。 
(1) 编辑 install 方法 ,在 Vue 之 后 添加 这 个 参数 : 


export default { 
install (Vue, options) { 
console.log('Installed!', options) 
} 
} 


现在 可 以 将 配置 对 象 添加 到 main.js 文件 的 vue.use () 方 法 中 了 。 
(2) 添加 一 个 baseUrl 属性 到 配置 中 : 


Vue.use(VueFetch, { 
baseUrl: 'http://localhost:3000/', 
} 
现在 应 该 可 以 在 浏览 絮 控 制 台 中 看 到 options 对 象 。 
(3) 将 baseUrl 存储 到 一 个 变量 中 ， 以 便 稍 后 使 用 : 


let baseUrl 























export default { 
install (Vue, options) { 
console.log('Installed!', options) 


baseUrl = options.baseUrl 


}, 
} 


3. $fetch 方法 


现在 ,我 们 将 编写 $fetch 方法 。 此 处 将 采用 我 们 在 FAQ 组 件 的 createa 钩子 中 使 用 的 大 
部 分 代码 。 


(1) 使 用 fetcn 实现 $fetch 方法 : 


export async function S$fetch (url) { 
const response = await fetch( “S${baseUrl}s{url}.) 
if (response.ok) { 
const data = await response.json() 
return data 
} else { 
Const error = new Error('error') 
throw error 
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我 们 将 其 导出 ， 以 便 在 普通 的 JavaScript 代码 中 使 用 它 。url 参数 现在 只 是 没有 域名 的 查询 
路 径 ， 域 名 则 位 于 我 们 的 baseUr1l 变量 中 一 一 这 样 可 以 轻松 地 更 改 它 ， 无 须 重 构 每 个 组 件 。 我 
们 也 要 处 理 JSON 解析 ， 因 为 来 自 服务 器 的 所 有 数据 都 将 以 JSON 编码 。 


(2) 为 了 使 它 在 所 有 组 件 中 可 用 ， 只 需要 将 其 添加 到 Vue 的 原型 ( 这 是 用 于 创建 组 件 的 构造 
函数 ) 中 即 可 : 


export default { 
install (Vue, options) { 
// 插件 选项 


baseUrl = options.baseUrl 

















Vue.prototype.s$fetch = $fetch 
Fs 
} 





(3) 然后 重 构 FAQ 组 件 ， 以 便 在 created 钩子 中 使 用 新 的 特殊 $fetcn 方法 : 


this.loading = true 
bry 
this.gquestions = await this.sgfetch('aquestions') 
中 
catch (e) { 
this.error = e 
this.loading = false 














我 们 的 组 件 代 码 现 在 更 简短 、 更 易于 阅读 , 并 且 更 具 可 扩展 性 , 因为 可 以 轻松 更 改 基 本 URL。 





5.2.4 使 用 mixin 复 用 代码 
我 们 已 经 看 到 了 如 何 创建 插件 , 还 有 另 一 种 方法 可 以 改进 我 们 的 代码 一 一 如 果 可 以 在 多 个 组 


信 


件 中 复 用 组 件 定义 〈 如 计算 属性 、 方 法 或 侦 听 器 )， 会 怎么 样 呢 ? 这 就 是 mixin 的 用 途 ! 














mixin 是 可 应 用 于 其 他 定义 对 象 ( 包括 其 他 mixin ) 的 组 件 定义 对 象 。 它 编写 起 来 非常 简单 ， 
为 看 起 来 和 普通 的 组 件 定 义 完全 一 样 ! 





我 们 的 目标 是 让 RemoteData mixin 允许 任何 组 件 向 服务 器 发 出 请 求 以 获取 数据 。 我 们 在 src 
目录 中 添加 一 个 新 的 mixins 文件 来， 并 创建 一 个 新 的 RemoteData.js 文件 。 


(1) 开始 非常 简单 ， 我 们 将 导出 一 个 具有 数据 属性 的 定义 : 


export default { 
data () { 
return { 
remoteDataLoading: 0， 
站 
于 
} 
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这 个 remoteDataLoading 属性 将 用 于 计算 当前 正在 加 载 请 求 的 数量 ， 以 帮助 
我 们 显示 加 载 动画 。 


(2) 现在 ， 要 在 FAQ 组 件 中 使 用 这 个 mixin， 需 要 导入 并 在 mixins 数组 中 添加 它 : 


<script> 
import RemoteData from '../mixins/RemoteData' 


export default { 
mixins: | 
RemoteData， 
]， 
A bora 
} 


</script> 


如 果 现 在 检查 这 个 组 件 ， 应 该 能 看 到 显示 了 一 个 额外 的 remoteDataLoading 属性 。 








v <Root 
v <AppLayout data 
» <NavMenu » S$route: Object 
1 /faq » questions: Array[5] 








remoteDataLoading: © 








发 生 了 什么 事 ? mixin 被 应 用 并 且 合 并 到 了 FaAo.vue 的 组 件 定义 中 。 这 意味 着 aata 钧 子 被 
调用 了 两 次 : 首先 在 mixin 中 调用 ， 然 后 在 FAQ 定义 中 添加 了 一 个 新 属性 ! 











你 有 ( 举 个 例子 ) 一 个 方法 的 属性 具有 相同 名 称 ,， 最 后 应 用 的 那个 将 履 盖 之 前 的 


Vue 会 自动 合并 标准 选项 ， 如 钩子 、 数 据 、 计 算 属 性 、 方 法 和 侦 听 器 ， 但 是 如 果 








(3) 让 我 们 尝试 用 男 一 个 值 覆盖 组 件 中 的 新 属性 : 


data () { 
return { 
questions: [], 
error: null, 
loading: false, 
remoteDataLoading: 42, 
} 
} 


正如 你 在 组 件 检查 器 中 看 到 的 那样 ， 最 终 的 组 件 定义 比 mixin 具有 更 高 的 优先 级 。 男 外 ， 你 
可 能 已 经 注意 到 mixins 选项 是 一 个 数组 ， 因 此 可 以 将 多 个 mixin 应 用 于 定义 ， 它 们 将 按 顺序 合 
并 。 例 如 ， 我 们 有 两 个 mixin， 并 和 希望 将 它们 应 用 于 组 件 定义 。 以 下 是 将 发 生 的 事情 : 


口 定义 对 象 包含 mixin 1 的 选项 ; 
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D mixin 2 的 选项 被 合并 到 定义 对 象 ( 现 有 属性 /方法 名 称 被 覆盖 ); 
口 组 件 的 选项 以 同样 的 方式 被 合并 到 最 终 定义 对 象 。 





现在 可 以 从 FAQ 组 件 定义 中 移 除 重复 的 remoteDataLoading: 42 了 。 


data、created、mounted 等 钩子 都 按 它们 应 用 于 最 终 定义 的 顺序 逐一 调用 。 
文 也 意味 着 最 后 的 组 件 定义 钩子 将 被 最 后 调用 。 


1. 获取 远程 数据 
我 们 遇 到 了 一 个 问题 : 使 用 RemoteData mixin 的 每 个 组 件 都 将 具有 不 同 的 数据 属性 以 供 获 
取 。 因 此 ， 需 要 将 参数 传递 给 我 们 的 mixin。 由 于 mixin 本 质 上 是 一 个 定义 对 象 ， 为 什么 不 使 用 
一 个 可 以 接收 参数 然后 返回 一 个 定义 对 象 的 函数 呢 ? 这 就 是 我 们 要 做 的 ! 


(1) 使 用 一 个 带 有 resources 参数 的 函数 封装 我 们 定义 的 对 象 ; 


export default function (resources) { 
return { 
data () { 
return { 
remoteDataLoading: 0， 
} 
二 
3 
} 


resources 参数 将 是 一 个 对 象 ， 每 个 键 都 是 要 添加 的 数据 属性 的 名 称 ， 值 是 需要 对 服务 器 
进行 请 求 的 路 径 。 
(2) 所 以 需要 改变 我 们 在 Fao.vue 组 件 中 使 用 mixin 的 方式 ， 使 用 函数 调用 : 















































mixins: [ 
RemoteDatal({ 
questionList: 'questions', 
让 
]， 


在 这 里 ,我 们 将 获取 http://localhost:3000/questions URL( 使 用 之 前 创建 的 特殊 sfetch 方法 )， 
并 将 结果 放 入 questionList 属性 中 。 











现在 回 到 我 们 的 RemoteData mixin 中 ! 
(3) 首先 ， 需要 将 每 个 数据 属性 初始 化 为 一 个 null 值 ， 以 便 Vue 设置 它们 的 响应 式 属 ; 





再 











data () { 
Jet initData = { 
remoteDataLoading: 0， 
} 
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// 初始 化 数据 属性 

for (const key in resources) { 
initData[lkey] = null 

} 


return initData 


这 一 步 非常 重要 。 如 果 不 初 始 化 数据 ， 它 就 不 会 被 Vue 添加 响应 式 属性 ， 因 此 
组 件 不 会 在 属性 更 改 时 更 新 。 


你 可 以 尝试 这 个 应 用 ,会 在 组 件 检查 带 中 看 到 新 的 questionList 数据 属性 已 添加 到 了 FAQ 
组 件 中 。 











data 


» Sroute: Object 
» questionList: Array[5] 




















(4) 然后 ， 我 们 将 创建 一 个 新 的 fetchResource 方法 来 获取 一 个 资源 并 更 新 相应 的 数据 





methods: { 
async fetchResource (key, url) { 
ty 
this.$Sdata[lkey] = await this.sfetch(url) 


} catch (e) { 


console.error(e) 
} 
} 


}, 
我 们 的 组 件 现在 可 以 访问 这 个 新 的 方法 并 且 直 接 使 用 它 。 
(5) 为 了 让 mixin 更 加 智能 ， 我 们 将 在 created 钩子 ( 将 被 合并 ) 中 自动 调用 它 : 


Created () { 
for (const key in resources) { 
let url = resources[key] 
this.fetchResource (key, url) 
lj 
} 


你 现在 可 以 验证 suestionList 数据 属性 是 否 通过 对 服务 器 发 出 的 新 请 求 进行 更 新 。 





























questionList: Array[5] 
» 9: 0bject 
» 1: 0bject 
» 2: Object 
» 3: Object 
» 4: Object 
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(6) 然后 ， 你 可 以 在 FAQ.vue 组 件 中 移 除 使 用 suestions 属性 的 旧 代 码 ， 并 更 改 模板 以 使 
用 新 属性 : 


<article v-for="gquestion of questionList"> 


2. 加 载 管 理 























接 下 来 要 做 的 是 提供 一 种 方式 来 了 解 是 否 应 该 显示 加 载 动画 。 由 于 可 能 有 多 个 请 求 , 我 们 将 
使 用 一 个 数字 计数 器 而 非 已 经 在 aata 钩子 中 声明 的 布尔 类 型 remoteDataLoading。 每 次 发 出 
请 求 时 ， 计 数 器 加 1; 完成 时 ， 则 计数 器 减 1。 这 意味 着 如 果 它 等 于 0， 那 么 当前 没有 请 求 正在 
等 待 ; 如 果 它 大 于 或 等 于 1， 就 应 该 显示 一 个 加 载 动画 。 





























(1) 增加 两 个 语句 ， 分 别 递增 和 递减 fetchResource 方法 中 的 remoteDataLoading 计 
数 絮 : 


async fetchResource (key, url) { 
this.sdata.remoteDataLoading++ 
try { 
this.sqata[key]l = await this.sfetch(url) 
} catch (e) { 
console.error (e) 
} 
this.sdata.remoteDataLoading-- 


1 


(2) 为 了 更 加 轻松 地 用 mixin， 我 们 添加 一 个 计算 属性 ， 称 为 remoteDataBusy。 需 要 显示 
加 载 动画 时 ， 它 的 值 会 是 true: 


computed: { 
remoteDataBusy () { 
return this.s$data.remoteDataLoading !== 0 
J 
ss 








(3) 回 到 FAQ 组件, 我 们 现在 可 以 移 除 1oading 属性 , 改变 Loading 组 件 的 v-if 表达 式 ， 
并 使 用 remoteDataLoading 计算 属性 : 








<Loading v-if="remoteDataBusy" /> 
你 可 以 尝试 刷新 页 面 以 查看 获取 到 数据 之 前 显示 的 加 载 动画 。 


3. 错误 管理 











最 后 ， 我 们 可 以 管理 可 能 在 任意 资源 请 求 中 发 生 的 错误 。 








(1) 把 每 个 资源 的 错误 存储 在 一 个 新 的 remoteErrors 对 和 象 中 ， 这 个 对 象 需要 初始 化 : 
// 初始 化 数据 属性 


initData.remoteErrors = {} 
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for (const key in resources) { 
initData[lkey] = null 
initData.remoteErrors[key] = null 


} 


remoteErrors 对 象 的 键 将 与 资源 相同 ， 如 果 有 错误 ， 值 将 为 错误 ; 如果 没有 错误 ， 则 值 





为 Ti 
接 下 来 ,我 们 需要 修改 fetchResource 方法 : 


D 在 请 求 之 前 ， 通 过 将 错误 设置 为 null 来 重 轩 错 误 ; 
口 如 果 catch 块 中 有 错误 ， 则 将 其 放 人 remoteErrors 对 象 中 正确 的 键 上 。 




















(2) fetchResource 方法 现在 应 该 如 下 所 示 


async fetchResource (key, url) { 

this.sdata.remoteDataLoading++ 
// 重 置 错 误 
this.$data.remoteErrors [key] = null 
try 

this.S$Sdata[lkey] = await this.sfetch(url) 
} catch (e) { 

console.error (e) 

// 放置 错误 

this.s$data.remoteErrors[key] = e 
} 
this.s$data.remoteDataLoading--— 


}, 











现在 可 以 为 每 个 资源 显示 特定 的 错误 消息 了 ,但 在 此 项 目 中 只 会 显示 一 条 通用 的 错误 消息 。 EB 
让 我 们 添加 男 一 个 名 为 nasRemoteErrors 的 计算 属性 ， 如 果 至 少 有 一 个 错误 就 会 返回 true。 


























(3) 使 用 JavaScript Object .keys () 方法 ,可 以 友 代 remoteErrors 对 象 中 的 键 并 检查 一 些 

















值 是 否 不 为 null ( 即 为 真 值 ): 


computed: { 
-A 


hasRemoteErrors () { 
return Object.keys (this.sdata.remoteErrors) .some ( 
key => this.S$dqata.remoteErrors [key] 
) 
} 
} 


(4) 现在 可 以 再 次 更 改 FAQ 组 件 模板 ， 使 用 新 的 属性 替换 error 属性 : 


<div class="error" Vv-if="hasRemoteErrors"> 


像 我 们 之 前 做 的 一 样 ， 可 以 关闭 服务 器 以 查看 错误 消息 的 显示 。 
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我 们 已 经 完成 了 FAQ 组件， 它 的 脚本 现在 应 该 如 下 所 示 : 


<script> 
import RemoteData from '../mixins/RemoteData' 


export default { 
mixins: [ 
RemoteDatal{ 
questionList: 'questions', 
0 
J 
} 


</script> 


如 你 所 见 ， 它 现在 非常 简洁 ! 


5.3 支持 工 单 


最 后 ,我 们 将 创建 应 用 中 经 过 身份 验证 的 部 分 , 用 户 可 以 在 其 中 添加 和 查看 文 持 工 单 。 所 有 
必要 的 请 求 都 可 以 在 你 已 经 下 载 的 服务 器 上 访问 。 如 果 你 对 如 何在 节点 中 使 用 passportjs 完成 这 
项 工作 感到 好 奇 ， 可 以 查看 源 代码 ! 














5.3.1 用 户 认 证 
本 节 将 关注 应 用 的 用 户 系 统 。 我 们 会 拥有 登录 和 注册 组 件 ， 以 便 创建 新 用 户 。 
1. 将 用 户 存储 在 一 个 集中 式 state 里 


我 们 将 把 用 户 数 据 存 储 在 一 个 state 对 象 中 ， 就 像 在 第 3 章 中 所 做 的 那样 ， 从 而 可 以 在 应 用 
的 任何 组 件 中 访问 它 。 
(1) 在 main.js 旁边 创建 一 个 新 的 state.js 文件 ， 用 于 导出 state 对 象 : 


export default { 
user: null, 


} 


没有 用 户 登录 时 ，user 属性 为 nul11， 否 则 它 将 包含 用 户 数据 。 























(2) 接着 ， 在 main.js 文件 中 导入 state: 
import state from './state' 
(3) 然后 ， 将 其 用 作 根 实例 的 数据 ， 以 便 Vue 使 其 成 为 响应 式 的 : 


new Vue ({ 
el: '#app', 
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data: state, 

router, 

render: h => h(AppLayout), 
} 


@ 另 一 个 插件 


我 们 可 以 在 需要 时 在 组 件 文件 中 导入 state， 但 使 用 Vue 原型 上 名 为 $state 的 特殊 getter 访 
问 它 更 为 方便 ， 就 像 我 们 为 fet ch 插件 所 做 的 那样 。 我 们 将 state 对 象 传递 给 插件 选项 ，getter 
将 返回 它 。 





(1) 在 plugins 文件 夹 中 ,创建 一 个 导出 新 插件 的 state.js 文件 : 


export default { 
install (Vue, state) { 
Object .defineProperty (Vue.prototype, 'S$state', { 
get: () => state, 
} 
} 
} 











这 里 使 用 JavaScript object .defineProperty () 方 法 在 Vue 原型 上 设置 了 一 个 getter， 所 
以 每 个 组 件 都 会 继承 它 ! 


最 后 一 件 事 我 们 需要 安装 state 插件 ! 


(2) 在 main.js 文件 中 ， 导 入 新 的 插件 : 


import VueState from './plugins/state' 


(3) 然后 使 用 state 对 象 作 为 选项 参数 进行 安装 : 


Vue.use (VueState, state) 























现在 可 以 在 组 件 中 使 用 $state 来 访问 全 局 状态 了 ! 这 里 是 一 个 例子 : 


console.log(this.sstate) 
它 应 该 输出 具有 user 属性 的 state 对 象 。 
2. 登录 表单 


本 节 将 首先 创建 一 个 新 组 件 ， 以 帮助 我 们 更 快 地 构建 表单 ， 然 后 使 用 Login .vue 组 件 将 注 
册 表 单 和 登录 表单 添加 到 应 用 中 ,在 后 面 的 几 节 中 ,我 们 将 创建 男 一 个 表单 来 提交 新 的 支持 工 单 。 


@ 聪明 的 表单 


这 个 通用 组 件 将 处 理 表单 组 件 的 通用 结构 ， 并 且 会 自动 调用 一 个 operation 峭 数 ， 显 示 一 
个 加 载 动画 和 该 操作 抛 出 的 错误 消息 。 大 多 数 情 况 下 ， 该 操作 是 对 服务 器 发 出 的 PosT 请 求 。 
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这 个 模板 基本 上 就 是 一 个 包含 标题 的 表单 、 一 个 





泻 染 输入 框 的 默认 持 模 、 一 个 泻 染 按钮 的 





actions 捅 槽 、 一 个 加 载 动 画 和 一 个 放置 错误 消息 的 地 方 。 对 于 应 用 中 需要 的 两 个 表单 ， 这 已 





经 足够 通用 了 。 
(1) 在 components 文件 夹 中 创建 一 个 新 的 smartForm.vue 组 件 : 
<template> 
<form @submit.prevent="submit"> 


<section class="content"> 
<h2>{{ title }}</h2> 





<!-- Main content --> 

<slot /> 

<div class="actions"> 
<!-- Action buttons --> 
<slot name="actions" /> 

</div> 


<div class="error" 
</section> 


<transition name="fade"> 


Vv-if="error">{{ error 


}}</div> 


<!-—- Expanding over the form --> 
<Loading v-if="busy" class="overlay" /> 
</transition> 
</form> 
</template> 


在 <form> 元 素 上 ， 我们 在 submit 事件 上 设置 了 一 个 事件 监听 器 。 它 使 用 
prevent 修饰 符 阻 止 浏览 器 的 默认 行为 (重新 加 载 页 面 )。 


遇 性 








目前 ，smartForm 组 件 有 以 下 3 个 


| 


口 title: 显示 在 <h2> 元 素 中 。 





(2) 将 它们 添加 到 组 件 的 script 部 分 : 


<script> 
export default { 
props: { 
eb eg r= 
type: String, 
required: 
和 
operation: { 
type: Function, 
required: 
} 
valid: { 


i 


tT 


口 operation: 提交 表单 时 调用 的 异步 函数 。 它 应 该 返回 一 个 Promise。 
D valid: 一 个 布尔 值 ， 以 防止 表单 在 无 效 时 调用 操作 。 
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type: Boolean, 
required: true, 
) 
} 
} 


</script> 


正如 你 所 看 到 的 ， 我们 现在 使 用 一 种 不 同 的 方式 来 声明 prop 








通过 使 用 对 象 ， 可 以 指定 


prop 的 更 多 细节 。 例 如 ， 设置 required: true，Vue 会 在 我 们 忘记 prop 时 发 出 警告 。 我 们 也 
可 以 放 一 个 Vue 会 检查 的 类 型 。 建 议 使 用 这 个 语法 ， 因 为 它 有 助 于 理解 组 件 的 prop 并 避免 错误 。 











我 们 还 需要 两 个 数据 属性 。 


口 busy: 一 个 布尔 值 ， 用 于 切换 加 载 动画 的 显示 。 
口 error: 这 是 错误 消息 ; 如 果 没 有 ， 则 为 null。 


(3) 将 它们 添加 到 aata 钩子 里 : 


data () { 
return { 
error: null, 
busy: false, 
} 
3 


(4) 最 后 ， 我 们 需要 编写 提交 表单 时 调用 的 submit 方法 : 


methods: { 
async submit () { 
if (this.valid && !this.busy) { 
this.error = null 
this.busy = true 
try 
await this.operation() 
} catch (e) { 
this.error = e.message 
} 
this.busy = false 
} 
} 
} 


如 果 表 单 是 无 效 的 或 有 操作 尚未 完成 ,我 们 不 会 调用 该 操作 。 否 则 ,我们 重 置 error 属性 ， 




































































然后 使 用 await 关键 字 调 用 operation prop， 因 为 它 应 该 是 一 个 返回 Promise 的 异步 函数 。 如 














采 扣 




















有 捉 到 错误 ， 就 将 error 属性 设置 为 错误 消息 ， 以 便 显示 它 。 





(5) 现在 我 们 的 通用 表单 已 经 准备 就 纤 了 ， 可 以 在 global-components.js 文件 中 注册 它 : 


import SmartForm from './components/SmartForm.vue' 
Vue.component ('SmartForm', SmartForm) 
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@ 表单 输入 组 件 


表单 中 将 有 许多 具有 相同 标记 和 功能 的 输入 框 。 这 是 制作 男 一 个 通用 、 可 复 用 组 件 的 绝 佳 时 
机 。 该 组 件 将 有 一 个 小 模板 , 主要 是 一 个 -input > 元素 , 并 且 能 够 在 无 效 时 向 用 户 显 示 红 色 边 框 。 


(1) 首先 创建 一 个 带 有 以 下 prop 的 新 FormInput .vue 组 件 : 

















D name 是 输入 框 的 HTML 名称， 是 让 浏览 句 的 自动 补 全 功能 生效 所 需要 的 ; 
口 type 将 默认 为 "text '， 但 最 终 需 要 设置 为 'bpassword'; 

口 value 是 输入 框 的 当前 值 ; 

口 placenolgder 是 输入 框 内 部 显示 的 标签 ; 

口 invalid 是 一 个 用 来 切换 无 效 显 示 ( 红色 边框 ) 的 布尔 值 ， 默 认为 false。 


基本 应 该 像 这 样 使 用 prop 对 象 表示 法 : 


<script> 
export default { 
props: { 
name: { 
type: String, 






































J 
type: { 
type: String, 
default: 'text', 
}, 
value: { 
required: true, 
placeholder: { 
type: String, 
invalid: { 
type: Boolean, 
default: false, 
}, 
JS 
} 


</script> 


(2) 对 于 无 效 显示 ， 我 们 将 添加 一 个 计算 属性 来 动态 改变 输入 框 的 CSS 类 : 


computed: { 
inputClass () { 
return { 
'invalid': this.invalia， 
} 
js 
下 


(3) 现在 可 以 编写 我 们 的 模板 了 。 它 有 一 个 包含 <input > 元素 的 <div> 元 素 : 
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<template> 
<div class="row"> 
<input 
class="input" 
:class="inputClass" 
:name="name" 
:type="type" 
:value.prop="value" 
:placeholder="placeholder" 
/> 
</div> 
</template> 


我 们 在 v-bind:value 指令 中 使 用 prop 修饰 符 来 告诉 Vue 直接 设置 DOM 节点 
6 value 属性 ,而 不 是 设置 HTML 属性 。 在 处 理 输入 框 HTML 元 素 的 属性 (如 
value ) 时 ， 这 是 一 个 很 好 的 实践 。 


(4) 要 开始 测试 它 ， 可 以 在 global-components.js 文件 中 注册 该 组 件 : 


import FormIinput from './components/FormInput.vue' 
Vue .component ('FormInput', FormInput) 


(5) 使 用 FormInput 组 件 创建 一 个 新 的 Login.vue 组 件 : 


<template> 
<main class="login"> 
<h1>Please login to continue</h1i> 
<form> 
<FormInput 
name="username" 
:Value="username" 
placeholder="Username" /> 
</form> 
</main> 
</template> 


<script> 
export default { 
data () { 
return { 
username: '', 
} 
}e 
4} 


</script> 
(6) 不 要 忘记 routerjs 文件 中 相应 的 路 由 : 
import Login from './components/Login.vue' 


const routes | 
// 
{path: '/login', name: 'login', component: Login}, 
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你 可 以 通过 在 URL 中 使 用 /1ogin 路 径 打 开 应 用 来 测试 组 件 。 





Please login to continue 





Username 














目前 ，FormInput 组 件 是 只 读 的 ， 因 为 当 用 户 在 字段 中 键入 内 容 时 我 们 没有 做 任何 事情 。 
(7) 让 我 们 添加 一 个 方法 来 处 理 这 个 问题 : 


methods: { 
update (event) { 
console.log(event.currentTarget .Value) 


}, 
}, 


(8) 然后 可 以 监听 文本 字段 上 的 input 事件 : 

@input="update" 

现在 ， 如 果 你 在 文本 字段 里 键入 内 容 ， 内 容 应 该 会 被 打印 到 控制 台 。 

(9) 在 update 方法 中 , 我 们 将 触发 一 个 事件 以 将 新 值 发 送 给 父 组 件 。 默认 情况 下 , v-model 
指令 会 监听 input 事件 ， 新 值 就 是 第 一 个 参数 : 


methods: { 
update (event) { 
this.$emit('input', event.currentTarget .value) 
3 
ja 


为 了 理解 这 是 如 何 工作 的 ， 我 们 现在 还 不 会 使 用 v-model。 








(10) 我 们 现在 可 以 监听 这 个 input 事件 并 更 新 username prop: 


<FormIinput 
name="username" 
:Value="username" 
@input="val => username = val" 
placeholder="Username" /> 


username prop 的 值 应 该 在 Login 组 件 上 更 新 。 
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Foo 











[rx 0] | Elements Console Vue 


Vv Ready. Detected Vue 2.3.3 


Q Filtercomponents 
v <AppLayout 
» <NavMenu 
v <Login> = Svmg 
FormInput 








Sources 


router-view: /login 


Network 


Performance 





Memory Application Secy 


人 Components 


Login 


data 


» $route: Object 
username: "Foo" 








(11) 可 以 使 用 v-moael 指令 简化 这 段 代码 


<FormInput 
name="username" 
Vv-model="username" 
placeholder="Username" /> 


它 将 使 用 value prop 并 为 我 们 监听 input 事件 ! 


@ 自 定义 Vv-model 


就 像 我 们 刚刚 看 到 的 ,v-model 默认 使 用 valueprop 和 input 事件 ,但 是 还 可 以 进 


(1) 在 FormInput 组 件 中 ,添加 moael 选项 : 


model: { 

prep "text; 

event: 'update', 
} 
(2) 然后 ， 需 要 将 value prop 的 名 称 更 改 为 text: 
BronS 

L# 

text: { 

required: true, 
}, 


}, 
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(3) 并 在 模板 中 编写 : 
<input 


:value="text" 
. /> 


(4) 另外 ，input 事件 应 该 重 命名 为 update: 


this.s$semit ('update', event.currentTarget .value) 


这 个 组 件 在 Login 组 件 中 应 该 仍然 能 够 工作 ， 因 为 我 们 告诉 v-mogdel 使 用 text prop 和 
update 事件 ! 


我 们 的 输入 组 件 已 准备 就 绪 ! 对 于 这 个 项 目 , 需要 保持 该 组 件 简单 , 但 是 如 果 你 愿意 ,可 以 
添加 更 多 的 功能 ， 比 如 图 标 、 错 误 消息 、 浮 动 标签 ， 等 等 。 


@ 登录 组 件 
现在 可 以 继续 构建 Login 组 件 ， 负 责 用 户 登 录 和 注册 。 
需要 为 这 个 组 件 的 state 提供 几 个 数据 属性 。 


口 mode: 可 以 是 login 或 signup。 我 们 会 根据 它 改变 布局 。 
Dusername: 在 两 种 模式 下 都 会 使 用 。 

口 password: 同样 在 两 种 模式 下 都 会 使 用 。 

口 password2: 用 于 在 注册 时 验证 密码 。 

口 email: 用 于 注册 模式 。 


(1) 我 们 的 aata 钩子 现在 应 该 是 这 样 的 ; 


data () { 
return { 
mode: 'login', 
username: '' 
password: !' 
password2: '' 
email: '! 
} 
站 


(2) 然后 ， 可 以 添加 fitle 计算 属性 以 根据 模式 更 改 表 单 标题 : 


computed: { 
title () { 
Switch (this.mode) { 
case 'login': return 'Login' 
case 'signup': return 'Create a new account 
} 
3 
}, 

















[ 








dol 
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我 们 还 会 添加 一 些 基本 的 输入 验证 。 首先 , 我 们 希望 在 重新 输入 密码 字段 不 等 于 第 一 个 密码 
时 高 亮 显示 它 。 

G) 为 此 ， 添 加 另 一 个 计算 属 

retypePasswordError () { 


return this.password2 && this.password !== this.password2 
} 








性 : 





三 
ol 








然后 ， 我 们 还 将 检查 是 否 有 字段 是 空 的 ， 因 为 它们 都 是 必 填 的 。 











(4) 这 次 将 把 它 分 解 成 两 个 计算 属性 ,因为 不 需要 在 1ogin 模式 下 检查 注册 需要 的 特定 字段 : 


signupValid () { 
return this.password2 && this.email && 
1!this.retypePasswordError 

上 


Valid () { 
return this.username && this.password && 
(this.mode !== 'signup' || this.signupValid) 


} 


(5) 接 下 来 ， 添 加 将 用 于 用 户 登 录 或 注册 的 方法 ( 稍 后 会 在 “注册 操作 ”和 “登录 操作 ”小 
节 中 实施 它们 ): 


methods: { 
async operation() { 
await this[this.model] () 
lj 
async login () { 
PE -TODG 
} 
async signup () { 
// TODO 
} 





} 


(6) 现在 转向 模板 。 首 移 添加 一 个 smartForm 组 件 : 


<template> 
<main class="]login"> 

<hl>Please login to continue</h1i> 

<SmartForm 
class="form" 
Eat Les" tltele 
:operation="operation" 
:valid="valid"> 


ts SY. 2 
</SmartForm> 
</main> 


</template> 
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(7) 然后 可 以 添加 input 字段 : 


<FormInput 
name="username" 
Vv-model="username" 
placeholder="Username" /> 
<FormInput 
name="password" 
type="password" 
v-model="password" 
placeholder="Password" /> 
<template v-if="mode ==='signup'"> 
<FormInput 
name="verify-password" 
type="password" 
Vv-model="password2" 
placeholder="Retype Password" 
:invalid="retypePasswordError" /> 
<FormInput 
name="email" 
type="email" 
v-model="email" 
placeholder="Email" /> 
</template> 


不 要 忘记 name 属性 ， 它 将 允许 浏览 器 自动 补 全 字段 。 





(8) 在 input 字段 下 方 ， 每 种 模式 需要 两 种 不 同 的 按钮 。 对 于 登录 模式 ， 我 们 需要 Sign up 
和 Login 按钮 。 对 于 注册 模式 ， 我 们 需要 Back to login 和 Create account 按钮 : 


<template slot="actions"> 
<template v-if="mode ==='login'"> 
<button 
type="button" 
class="secondary" 
@click="mode ='signup'"> 
Sign up 
</button> 
<button 
type="submit" 
:disabled="!valid"> 
Login 
</button> 
</template> 
<template v-else-if="mode ==='signup'"> 
<button 
type="button" 
class="secondary" 
@click="mode ='login'"> 
Back to login 
</button> 
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<button 
type="submit" 
:disabled="!valid"> 
Create account 
</button> 
</template> 
</template> 


现在 可 以 测试 组 件 并 在 1ogin 和 signup 模式 之 间 切 换 。 


| Glewme ay | = > 





y D veAapp x (Wlocalhost NE 
所 © | © Iocalhost:4000/logl " 


Home FAQ Supporttickets Login 





Please login to continue 


Create a new account 


Username 


Password 





Retype Password 


Email 





Back to login 


























e@ 为 限定 作用 域 的 元 素 的 子 元 素 编写 样式 
该 表单 目前 占用 了 所 有 可 用 空间 ， 缩 小 一 点 会 更 好 。 





6 为 了 使 本 小 节 起 作用 ， 需 要 在 项 目 中 安装 最 新 的 vue-loader 包 。 


让 我 们 添加 一 些 样式 来 为 表单 设 定 最 大 宽度 : 


<style lang="stylus" scoped> 
.form { 
>>> .content { 
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max-width: 400px; 
} 


} 
</style> 


>>> 连 结 符 允 许 我 们 将 模板 中 使 用 的 组 件 内 的 元 素 作 为 目标 , 同时 仍然 限定 CSS 选择 器 其 余 
部 分 的 作用 域 。 在 我 们 的 例子 中 ， 生 成 的 CSS 看 起 来 如 下 所 示 : 


.form[data-v-0e596401] .content { 
max-width: 400px; 
中 


如 果 不 使 用 这 个 连结 符 ， 则 会 有 这 样 的 CSS : 


.form .content[data-v-0e596401] { 
max-width: 400px; 
} 


这 不 起 作用 ， 因 为 .content 元 素 位 于 我 们 在 模板 中 使 用 的 smartForm 组 件 内 。 





6 如 果 使 用 SASS， 则 需要 使 用 /deep/ 选 择 器 而 不 是 >>> 连 结 符 。 


该 表单 现在 应 该 如 下 所 示 。 


LGuamaumechau | = 己 | 开 





mweApp x YY localhost wy 
€ 3 © |© localhost4000 "| 





Home FAQ Supporttickets Login 


Please login to continue 


Create a new account 
Usemame 
Password 
Retype Password 
Email 


Back to login 
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@ 改进 获取 插件 


目前 ,我 们 的 $fetch 方法 只 能 对 服务 器 发 出 cET 请 求 。 这 对 于 加 载 FAQ 是 足够 的 ， 但 现 
在 需要 添加 更 多 特性 。 


(1) 在 plugins/fetch.js 文件 中 ， 编 辑 函 数 以 接收 新 的 options 参数 : 


export async function S$fetch (url, options) { 
J 
} 


options 参数 是 浏览 器 fetch 方法 的 一 个 可 选 对 象 ， 它 允许 我 们 更 改 不 同 的 参数 ， 例 如 所 
使 用 的 HTTP 方 法、 请 求 主体 等 。 

(2) 在 $fetch 函数 的 开头 ， 我 们 想 要 设置 这 个 options 参数 的 一 些 默 认 值 : 

const finalOptions = Object.assign({}, { 


headers: { 
'Content-Type': 'application/json', 



































} 
credentials: 'include', 
}, options) 


默认 选项 告诉 服务 器 我 们 将 始终 在 请 求 主体 中 发 送 JSON， 并 告诉 浏览 需 我 们 还 将 包含 验证 
用 户 登 录 所 需 的 授权 令 牌 。 然后, 提供 的 options 参数 ( 如果 有 ) 添 加 它 的 值 给 finaloptions 
对 象 (例如 methoad 属性 或 body 属性 )。 

















(3) 接 下 来 ， 我 们 将 新 选项 添加 到 浏览 器 fetch 方法 : 5 
const response = await fetch(“s${baseUrl}s{url}., finalOptions) 








(4) 另外， 服务 器 总 是 将 错误 作为 文本 发 送 ， 所 以 可 以 捕获 它们 并 显示 给 用 户 : 


if (response.ok) { 

const data = await response.json() 
return data 

else { 

const message = await response.text() 
const error = new Error(message) 
error.response = response 

throw error 


} 

我 们 现在 准备 向 服务 器 发 出 第 一 个 PosT 请 求 ， 以 便 为 用 户 创建 一 个 新 账户 ， 然 后 登录 1! 

@ 注册 操作 

我 们 将 从 账户 创建 开始 ， 因 为 目前 还 没有 任何 用 户 。 在 服务 器 上 调用 的 路 径 是 /signup, 它 


期 望 一 个 PosT 请 求 , 其 请 求 主体 中 有 一 个 包含 新 账户 username .password 和 email 的 JSON 
对 象 。 














一 








146 第 5 章 项 目 3: 支持 中 心 





使 用 我 们 刚刚 改进 的 $fetch 方法 来 实现 它 : 


async Signup () { 
await this.$fetch('signup', { 
method: 'POST', 
body: JSON.stringify({ 
username: this.username, 
password: this.password, 
email: this.email, 
小 
} 
this.mode = 'login' 


yy 


的 我 们 不 在 这 里 管理 错误 ， 因 为 这 是 之 前 构建 的 SmartForm 组 件 的 工作 。 





这 样 就 可 以 了 ! 现在 可 以 使 用 一 个 简单 的 密码 创建 新 账户 , 方便 记 住 并 在 以 后 使 用 。 如 果 账 
户 创建 成 功 ， 表 单 将 返回 1ogin 模式 。 








有 一 件 这 里 没有 做 但 可 以 改进 的 事情 : 让 用 户 知道 他 们 的 账户 已 经 创建 , 并且 现 
在 可 以 登录 。 你 可 以 在 表单 下 方 添加 消息 ， 甚 至 可 以 显示 浮动 通知 ! 


@ 登录 操作 
登录 方法 与 注册 几乎 完全 相同 ， 差 异 是 : 


口 只 将 请 求 主体 中 的 username 和 password 发 送 到 /1ogin 路 径 ; 

口 响应 是 需要 设置 为 全 局 状态 的 用 户 对 象 ， 这 样 每 个 组 件 都 可 以 知道 是 否 有 已 登录 的 用 户 
(使 用 暴露 $sstate 属性 的 插件 ); 

口 然后 重 定向 到 主页 。 


代码 看 起 来 应 该 像 是 这 样 : 


async login () { 
this.$state.user = await this.$fetch('login', { 
method: 'POST', 
body: JSON.stringify({ 
username: this.username, 
password: this.password, 
}s 
} 
this.s$router.push({name: 'home'}) 


让 


现在 可 以 尝试 使 用 先前 用 于 创建 账户 的 username 和 passwora 登录 。 如 果 登 录 成 功 ， 则 
应 被 router.push () 方 法 重 定 向 到 主页 。 
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此 请 求 返回 的 user 对 象 包含 将 在 导航 菜单 中 显示 的 username 字段 。 

3. 用 户 菜单 

现在 是 时 候 将 用 户 相关 功能 添加 到 我 们 在 NavMenu.vue 文件 开头 创建 的 导航 菜单 中 了 。 
(1) 我 们 希望 它们 出 现在 菜单 的 最 右 侧 ， 所 以 将 这 个 元 素 添加 到 之 前 写 的 路 由 器 链接 之 后 : 


<div class="spacer"></div> 


这 会 简单 地 使 用 CSS 的 flexbox 属性 来 占用 菜单 中 所 有 可 用 的 空间 ， 以 便 把 之 后 放 入 的 任何 

















内 容 都 推 到 右 侧 。 


象 ， 














多 亏 在 5.3.1 节 开 头 所 做 的 插件 , 我 们 可 以 通过 $state 属性 访问 全 局 状态 。 它 包含 user 对 
人 允许 我 们 知道 用 户 是 否 已 登录 ， 并 显示 他 们 的 username 和 1logout 链接 。 


(2) 在 NavMenu.vue 组 件 中 添加 用 户 菜单 : 


<template v-if="$state.user"> 
<a>{{ Sstate.user.username }}</a> 
<a @click="logout">Logout</a> 
</template> 


(3) 如 果 用 户 没 有 登录 ， 只 显示 一 个 1ogin 链接 (将 下 面 的 内 容 添加 到 我 们 刚刚 添加 的 模板 














当中 





<router-link v-else :to="{name:'login'}">Login</router-link> 5 
logout 链接 需要 一 个 新 的 logout 方法 ,我 们 现在 就 来 创建 。 
@ logout 方法 


logout 方法 包含 对 服务 器 上 /1logout 路 径 的 简单 调用 ， 返 回 一 个 status 属性 等 于 'ok' 





的 对 象 : 


<script> 
export default { 
methods: { 
async logout () { 
const result = await this.g$fetch('logout') 
if (result.status === 'OK') { 
this.$state.user = null 
} 
} 
} 
} 


</script> 


如 果 用 户 成 功 登 出 ， 就 重 置 全 局 状态 下 的 user 值 。 
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4. 带 导 航 守卫 的 私有 路 由 
既然 已 经 有 了 一 个 认证 系统 ， 我 们 可 以 有 不 同类 型 的 路 由 : 


口 公开 路 由 始终 可 访问 ; 
口 私有 路 由 仅 限 登 录用 户 访问 ; 

口 访客 路 由 只 能 由 未 登录 的 用 户 访问 。 
我 们 将 提前 创建 一 个 路 由 组 件 来 测试 代码 。 


(1) 创建 稍 后 将 用 于 显示 用 户 支持 工 单 的 ricketsLayout .vue 组 件 























<template> 
<main class="tickets-layout"> 
<h1>Your Support tickets</hl> 
BD 


</main> 


</template> 
(2) 然后 ， 在 routerjs 文件 中 添加 相应 的 路 由 : 
'./components/TicketsLayout.vue' 


import TicketsLayout from 


= [ 


const routes 

VA 

{ path: '/tickets', name: 'tickets', 
component: TicketsLayout }, 





] 
(3) 最 后 ， 在 导航 菜单 中 添加 指向 这 个 新 页 面 的 链接 : 
<router-link :to="{ name:'tickets'}"> 
Support tickets</router-link> 
@ 路 由 元 属性 
我 们 可 以 在 routerjs 文件 中 受 影响 路 由 上 的 meta 对 象 中 添加 页 面 访问 类 型 信息 。 
刚刚 创建 的 路 由 应 该 是 私有 的 ， 只 有 已 登录 的 用 户 才 能 访问 。 
属性 添加 到 路 由 上 的 meta 对 象 : 
true} }, 


meta: { private: 





口 将 private 
"ytiekete. /sg S/S 
现在 » 如 果 你 跳 转 到 工 单 页 面 并 仿 查 任何 组 件 ， 应 该 看 到 由 vuUue-router 插件 暴露 的 $sroute 


{ path: 








直 9 
Lo 








对 象 。 它 包含 meta 对 象 中 的 private 属 牧 
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也 Ready. Detected Vue 2.4.1 人 Components 1 Vuex 
Q Filter components TicketsLayout © Inspect DON 
v <Root 
v <AppLayout data 
» <NavMenu v Sroute: Object 
» <TicketsLayout> = Svme router-view: /tickets fullPath: "/tickets/" 


v meta: Object 
private: true 
name: "tickets" 
» params: Object (empty) 
path: "/tickets/" 
» query: Object (empty) 











6 你 可 以 将 任何 其 他 信息 放 入 路 由 的 meta 对 象 以 扩展 路 由 器 功能 。 


@ 路 由 器 导航 守卫 


现在 我 们 知道 工 单 路 由 是 私有 的 ,希望 在 路 由 解析 之 前 执行 一 些 逻 辑 来 检查 用 户 是 否 已 登 
录 。 这 就 是 导航 守卫 派 上 用 场 的 地 方 一 一 当 有 关 路 由 发 生变 化 时 会 调用 冰 数 钩子 , 它们 可 以 改变 
路 由 器 的 行为 。 

我 们 需要 的 导航 守卫 是 beforeEach, 它 在 每 次 路 由 解析 之 前 运行 , 允许 我 们 在 必要 时 用 男 
一 个 路 由 替换 目标 路 由 。 它 接收 带 有 3 个 参数 的 回调 函数 : 
口 to 是 当前 的 目标 路 由 ; 


口 from 是 以 前 的 路 由 ; 
口 next 是 为 了 完成 解析 不 得 不 在 某 个 时 刻 调用 的 函数 。 























如 果 忘 记 在 导航 守卫 中 调用 next， 你 的 应 用 将 被 卡 住 。 这 是 因为 在 调用 它 之 前 
可 以 进行 异步 操作 ， 所 以 路 由 器 不 会 自行 做 任何 假设 。 


(1) 在 导出 路 由 器 实例 之 前 ,添加 beforeEach 导航 守卫 : 


router.beforeEach( (to, from, next) => { 
ATODO 
console.log('to', to.name) 
next () 


}) 


(2) 现在 需要 确定 目标 路 由 是 否 为 私有 路 由 : 


if (to.meta.private) { 
// TODO 重 定向 到 登录 
} 
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(3) 要 检查 用 户 是 否 已 登录 ， 我 们 需要 全 局 状态 
import state from './Sstate' 

(4) 更 改 条 件 表达 式 以 检查 用 户 状态 : 

if (to.meta.private && !state.user) { 


// TODO 重 定向 到 登录 
} 





可 以 在 文件 的 开始 将 其 导入 : 


可 以 用 路 由 参数 调用 next 函数 ， 将 导航 重 定向 到 另 一 个 路 由 。 








(5) 所 以 这 里 可 以 重 定 癌 到 登录 路 由 ， 就 像 之 前 用 router .push() 方 法 做 的 那样 : 


if (to.meta.private && !state.user) { 
next ({name: 'login'}) 
return 


} 





& 不 要 忘记 返回 ， 否 则 你 将 在 这 个 函数 结尾 再 次 调用 next 1 





现在 可 以 尝试 登 出 并 点 击 Support tickets 链接 。 你 应 该 会 立即 重 定向 到 登录 页 面 。 





当 用 next 重 定向 时 , 每 次 重 定向 都 不 会 为 浏览 器 历史 记录 添加 额外 条 目 。 只 有 
最 后 的 路 由 才 有 历史 记录 。 


正如 你 在 浏览 融 控 制 台中 看 到 的 ， 每 次 尝试 解析 路 由 时 都 会 调用 导航 守卫 。 





to tickets 








to Login 








这 就 解释 了 为 什么 要 调用 next 这 个 函数 一 解析 过 程 将 持续 下 去 , 直到 我 们 不 再 重 定向 到 
男 一 个 路 由 。 


的 这 意味 着 导航 守卫 可 以 被 多 次 调用 , 但 这 也 意味 着 你 应 该 小 心 , 不 要 创建 一 个 无 
限 的 解析 “循环 ”1! 
导航 到 期 望 的 路 由 
用 户 登 录 后 ， 应 用 应 该 重 定向 到 他 们 最 初 想 要 浏览 的 页 面 。 
(1) 将 当前 想 要 访问 的 URL 作为 参数 传递 给 登录 路 由 : 


next ({ 
name: 'login', 
params: { 
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wantedRoute: to.fullPath, 
}, 
} 


现在 ， 如 果 单 击 Supporttickets 链接 并 重 定向 到 登录 页 面 ， 则 应 在 任意 组 件 上 的 sroute 对 
象 中 看 到 wantedRoute 参数 。 








data 


v S$route: Object 

fullPath: "/login" 

» meta: Object 
name: "login" 

v params: Object 

wantedRoute: "/tickets" 

path: "/login" 

» query: Object (empty) 











(2) 在 Login 组 件 中 ， 可 以 改变 login 方法 中 的 重 定向 并 使 用 这 个 参数 


this.S$router.replace (this.$route.params .wantedRoute || 
{ name: 'home'}) 


router.replace() 方 法 与 router.push() 方 法 非常 相似 , 区 别 在 于 前 者 将 浏 
览 器 历史 记录 中 的 当前 条 目 替 换 为 新 路 由 ， 而 不 是 添加 新 条 目 。 





如 果 现 在 登录 ， 则 应 重 定向 到 支持 工 单 页 面 ， 而 不 是 主页 。 
5. 初始 化 用 户 认 证 


当 页 面 加 载 和 应 用 启动 时 ,需要 检查 用 户 是 否 已 登录 。 出 于 这 个 原因 ， 服 务 器 有 一 个 /user 
路 径 。 如 果 用 户 登录 ， 它 将 返回 用 户 对 象 。 我 们 将 把 它 放 到 全 局 状态 中 ， 就 像 我 们 登录 了 一 样 。 
然后 ， 启 动 Vue 应 用 。 


(1) 在 mainjs 文件 中 ， 从 我 们 的 插件 中 导入 $fetch: 


import VueFetch, {$fetch} from './plugins/fetch' 


(2) 需要 创建 一 个 名 为 main 的 新 异步 函数 ， 我 们 会 在 其 中 请 求 用 户 数据 ， 然 后 启动 应 用 : 


async function main () { 
// 获取 用 户 信息 
try { 
state.user = await $fetch('user') 
} catch (e) { 
console.warn(e) 
} 
// 启动 应 用 
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new Vue ({ 
el: '#app', 
data: state, 
router, 
render: h => h(AppLayout), 
} 
} 


main() 


现在 ， 如 果 你 登录 并 刷新 页 面 ， 则 应 该 仍然 处 于 登录 状态 ! 





6. 访客 路 由 
还 有 一 种 情况 没有 管理 一 一 我 们 不 希望 已 经 登录 的 用 户 访问 登录 路 由 1 





(1) 这 就 是 为 什么 我 们 会 把 它 标记 为 访客 路 由 : 


{ path: '/login', name: 'login', component: Login, 
meta: {guest: true} }, 




















(2) 在 beforeEach 导航 守卫 内 部 ， 我 们 将 检查 路 由 是 否 仅 限 访 客 浏览 。 如 





则 重 定 向 到 主页 : 


router.beforeEach((to, from, next) => { 
人 二 号 
if (to.meta.guest && state.user) { 
next ({name: 'home'}) 
return 
} 
next () 


}) 











如 果 你 已 经 登录 ， 可 以 尝试 打开 登录 URL 
录 时 ， 你 才能 访问 此 页 面 。 


5.3.2 ”显示 和 增加 工 单 








在 本 节 中 , 我 们 将 把 工 单 支持 内 容 添加 到 应 用 中 。 首 先 显示 工 单 ， 然 后 构建 一 个 表单 让 用 户 





果 用 户 已 登录 ， 


你 应 该 会 立即 被 重 定向 到 主页 ! 只 有 在 未 登 





创建 新 工 单 。 为 此 ， 我 们 将 创建 两 个 组 件 ， 它们 藤 套 在 之 前 制作 的 TicketsLayout 组 件 中 。 





别 担心 ! 当 你 创建 账户 时 ， 会 自动 为 你 的 用 户 创建 示例 支持 工 单 。 


1. 工 单列 表 
可 以 在 服务 器 上 的 /tickets 路 径 请 求 工 单列 表 。 





(1) 创建 一 个 与 FAQ 组 件 相似 的 新 rickets .vue 组 件 。 
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(2) 使 用 RemoteData mixin 来 获取 工 单 : 


<script> 
import RemoteData from '../mixins/RemoteData' 


export default { 
mixins: | 
RemoteDatal{ 
tickets: 'tickets', 
oe 
J 
} 


</script> 
(3) 然后 添加 带 有 加 载 动画 、 空 白 消息 和 工 单列 表 的 模板 : 
<template> 


<div class="tickets"> 
<Loading v-if="remoteDataBusy"/> 


<div class="empty" v-else-if="tickets.length === 0"> 
You don't have any ticket yet. 
</div> 


<section v-else class="tickets-list"> 
<div v-for="ticket of tickets" class="ticket-item"> 
<span>{{ ticket.title }}</span> 
<span class="badge">{{ ticket.status }}</span> 
<span class="date">{{ ticket.date }}</span> 
</div> 
</section> 
</div> 
</template> 


我 们 需要 一 个 过 滤 右 来 显示 工 单 日 期 ! 


(4) 终止 客户 端 编译 并 使 用 以 下 命令 安装 momentjs: 


npm install --save moment 





(5) 在 main.js 文件 旁 创建 一 个 新 的 fiters.js 文件 ， 它 包含 date 过 滤器 : 


import moment from 'moment' 





export function date (value) { 
return moment (value) .format ('L') 


} 


(6) 然后 在 main.js 中 导入 filters 并 用 一 个 循环 注册 它们 : 


import * as filters from './filters' 
for (const key in filters) { 
Vue.filter(key, filters[key]) 
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(7) 现在 可 以 在 fickets 组 件 中 以 更 人 性 化 的 方式 显示 日 期 了 : 


<span class="date">{{ ticket.date | date }}</span> 


然后 ， 可 以 将 此 新 组 件 添加 到 TicketsLayout 组 件 ， 从 而 得 到 工 单列 表 。 








Your Support tickets 


Welcome EC 








不 要 忘记 导入 Tickets 并 将 其 放 在 components 选项 中 ! 

@ 会 话 过 期 

一 段 时 间 后 ， 用 户 会 话 可 能 不 再 有 效 。 这 可 能 是 由 于 时 间 到 期 ( 对 于 该 服务 器 而 言 设置 为 3 
小 时 ), 或 者 仅仅 是 因为 服务 器 重新 启动 。 让 我 们 尝试 重 现 这 种 情况 一 一 重新 启动 服务 器 并 再 次 
加 载 工 单列 表 。 

(1) 确保 你 已 登录 到 应 用 。 

(2) 在 运行 服务 器 的 终端 中 键入 rs， 然 后 按 回 车 键 重 新 启动 它 。 

(G3) 点 击 应 用 中 的 Home 按钮 。 

(4) 单 击 Support tickets 按钮 ， 以 返回 工 单列 表 页 面 。 


你 应 该 会 卡 在 加 载 动 画 ， 控 制 台 中 有 一 个 错误 消息 。 



































民 日] Elements Console Vue Sources Network “Performance “ Memory Application ” Security Audits @4 : 


© top 了 Filkter Info v 
to tickets router.js?767b:34 
to faq router.js?767b:34 


router.js?767b:34 
tickets:1 


to tickets 
@ GET http://localhost:3000/tickets 463 (Forbidden) 





RemoteData. jis?487b:37 





四 *Error: Unauthorized 
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服务 右 返 回 了 未 授权 的 错误 ， 这 是 因为 我 们 不 处 于 登录 状态 了 ! 


要 解决 这 个 问题 , 我 们 需要 将 用 户 登 出 。 如 果 处 于 私有 路 由 中 ,还 需要 将 用 户 重 定向 到 登录 
页 面 。 


放置 代码 的 最 佳 位 置 是 所 有 组 件 中 都 使 用 的 Sfetch 方法 ， 位 于 plugins/fetchjs 文件 中 。 尝 
试 访问 仅 限 登录 用 户 访问 的 路 径 时 ， 服 务 咒 将 始终 返回 403 错误 。 


(1) 在 修改 方法 之 前 ， 需 要 导入 state 和 路 由 器 : 


import state from '../state' 
import router from '../router' 


(2) 在 响应 处 理 中 添加 一 个 条 件 分 支 : 


if (response.ok) { 
7 as 
} else if (response.status === 403) { 
// 如 果 会 话 不 再 有 效 
// 我 们 登 出 
state.user = null 
// 如 果 这 个 路 由 是 私有 的 
// 我 们 跳 转 到 登录 页 面 
if (router.currentRoute.matched.some(r => r.meta.private)) { 
router.replace({ name: 'login', params: { 
wantedRoute: router.currentRoute.fullPath, 
}}) 











我 们 使 用 replace 方法 而 不 是 push， 因 为 不 想 在 浏览 器 历史 记录 中 创建 新 的 
63 导航 。 设 想 一 下 ,如果 用 户 点 击 后 退 按钮 , 会 再 次 重 定向 到 登录 页 面 ， 用户 将 无 
法 返回 私有 页 面 之 前 的 页 面 。 


现在 可 以 再 试 一 次 。 当 你 重新 启动 服务 器 并 点 击 Supporttickets 链接 时 , 应 重 定 向 到 登录 页 
面 ， 导 航 菜单 不 应 再 显示 你 的 用 户 名 。 
2. 骨 套 路 由 


因为 我 们 还 想 切 换 到 该 页 面 中 的 一 个 表单 ， 所 以 使 用 恋 套 路 由 来 构造 组 件 是 个 不 错 的 主 
意 一 一 如 果 每 个 路 由 至 少 有 一 个 路 由 顺 视 图 ， 那 么 这 些 路 由 就 可 以 有 子路 由 ! 所 以 在 /tickets 
路 由 器 下 ， 我 们 现在 有 两 个 子路 由 。 


口 将 成 为 工 单列 表 ( 完整 路 径 将 是 /tickets/ ), 它 的 行为 类 似 于 /tickets 下 的 默认 路 由 。 
口 ' /new' 将 是 发 送 新 工 单 的 表单 ( 完整 路 径 将 是 /tickets/new/ )。 
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(1) 使 用 临时 模板 创建 一 个 新 的 NewTicket .vue 组 件 : 


<template> 
<div class="new-ticket"> 
<hl>New ticket</h1l> 
S/N 
</template> 








(2) 在 routes.js 文件 中 ， 把 两 个 新 路 由 添加 到 /tickets 路 由 下 的 children 属性 里 面 : 


import Tickets from './components/Tickets.vue' 
import NewTicket from './components/NewTicket .vue' 


const routes = [ 
// 
{ path: '/tickets', component: TicketsLayout, 
meta: { private: true }, children: | 
{ path: '', name:'tickets', component: Tickets }, 


{ path: 'new', name: 'new-ticket', component: NewTicket }, 
J 


由 于 第 一 个 子路 由 是 空 字符 囊 , 在 解析 父 路 由 时 它 将 成 为 默认 路 由 。 这 意味 着 你 
应 该 将 父 路 由 的 名 称 ('tickets' ) 转移 给 它 。 


(3) 最 后 ， 可 以 更 改 TicketsLayout 组 件 , 来 使 用 路 由 器 视图 以 及 切换 子路 由 的 几 个 按钮 


<template> 
<main class="tickets-layout"> 
<h1>Your Support tickets</hl> 
<div class="actions"> 
<router-link 
Vv-if="$route.name !=='tickets'" 
tage*Dbuttors 
class="secondary" 
:to="{name: 'tickets'}"> 
See all tickets 
</router-link> 
<router-link 
Vv-if="$route.name !=='new-ticket'" 
tad= "batton”™ 
:to="{name: 'new-ticket'}"> 
New ticket 
</router-link> 
</div> 
<router-view /> 
</main> 
</template> 





人 你 可 以 在 路 由 器 链接 上 使 用 tag prop 来 更 改 用 于 泻 染 它 的 HTML 标签 。 
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正如 你 所 看 到 的 , 我 们 根据 当前 的 路 由 名 称 隐 藏 每 个 按钮 一 一 我 们 不 想 在 工 单列 表 页 面 显 示 
Show tickets 按钮 ， 也 不 希望 在 创建 新 工 单 的 表单 上 显示 New ticket 按钮 ! 


你 现在 可 以 在 两 个 子路 由 之 间 切 换 ， 并 查看 相应 的 URL 变化 。 


























| GulaumaEHAY | | 一 | 号 | 区 
口 Vue App x 和 
本 C | © localhost:4000/tickets/new | 女 
民 串 Elements Console Vue Sources Network Performance Memory Application Security Audits : Xx 
也 Ready. Detected Vue 2.4.1 从 Components 名 Vuex 六 Events C Refresh 
Q Filter components NewTicket © InspectDOM Q Filterinspected data 
v <Root 
v <AppLayout data 
>» <NavMenu » S$route: Object 
v <TicketsLayout 
RouterLink 
<NewTicket> == Svme router-view: /tickets/new 




















@ 修复 导航 守卫 


如 果 你 登 出 并 转 到 工 单 页 面 , 应 该 会 很 惊讶 地 发 现 能 够 访问 ! 这 是 因为 在 之 前 beforeEach 
导航 守卫 的 实施 中 存在 一 个 缺陷 一 一 我 们 没有 考虑 到 可 能 会 有 骨 套 路 由 ,所 以 设计 得 很 糟糕 ! 这 
个 问题 的 原因 是 to 参数 只 是 目标 路 由 ， 也 就 是 /ticket 路 由 的 第 一 个 子路 由 一 一 它 没有 
private 元 属性 ! 
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因此 ,我们 不 应 单纯 依赖 目标 路 由 ,而 是 应 该 检查 所 有 匹配 的 般 套 路 由 对 象 。 幸 运 的 是 ,每 
个 路 由 对 象 都 可 以 使 用 matched 属性 访问 这 些 路 由 对 象 的 列表 。 然 后 ， 可 以 使 用 some 数组 方 
法 来 验证 至 少 有 一 个 路 由 对 象 具 有 所 需 的 元 属性 。 


我 们 可 以 在 routerjs 文件 的 beforeEach 导航 守卫 中 将 条 件 代码 改 成 这 样 : 


router.beforeEach((to, from, next) => { 
if (to.matched.some(r => r.meta.private) && !state.user) { 
A 


if (to.matched.some(r => r.meta.guest) && state.user) { 



































现在 ， 不 管 嵌 套路 由 的 数量 是 多 少 ， 我 们 的 代码 都 可 以 正常 工作 了 ! 





个 强烈 建议 每 次 都 使 用 这 种 方法 用 matched 属性 来 避免 错误 。 


3. 发 送 表 单 
在 本 节 中 ， 我 们 将 完成 允许 用 户 发 送 新 支持 工 单 的 Newricket 组 件 。 创建 一 个 工 单 需要 两 


个 字段 : title 和 description。 


(1) 在 NewTicket .vue 组 件 的 模板 中 ， 我 们 可 以 添加 一 个 具有 标题 FormInput 组 件 的 
smartForm 组 件 : 





<SmartForm 
title="New ticket" 
:operation="operation" 
:valid="valid"> 
<FormInput 
name="title" 
v-model="title" 
placeholder="Short description (max 100 chars)" 
maxlength="100" 
required/> 
</SmartForm> 


(2) 我 们 还 可 以 添加 两 个 数据 属性 、operation 方法 ， 并 使 用 valia 计算 属性 进行 一 些 输 
和 验证; 


<script> 
export default { 
data () { 
return { 
Et 
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description: 
} 
} 
computed: { 
Valid () { 
return !!this.title && !!this.description 
} 
} 
methods: { 
async operation () { 
// TODO 
} 
} 
} 


</script> 


@ 表单 文本 区 域 

对 于 aescription 字段 ， 我 们 需要 一 个 <textarea> 元 素 ， 以 便 用 户 编写 多 行文 本 。 遗 憾 
的 是 , FormInput 组 件 还 不 支持 这 一 点 , 所 以 我 们 需要 稍 作 修 改 。 我 们 将 使 用 组 件 的 type prop， 
其 值 为 'textarea', 来 将 <input> 元 素 更 改 为 <textarea> 元 素 。 


(1) 创建 一 个 新 的 计算 属性 来 确定 将 演 染 哪 种 HTML 元 素 : 









































computed: { 
A 
element () { 


return this.type === 'textarea' ? this.type : 'input' 
5 


} 
当 值 ' textarea' 被 传递 时 ， 我 们 需要 演 染 一 个 <textarea>。 对 于 所 有 其 他 类 型 ， 组 件 都 





将 渲染 <input>。 
现在 使 用 特殊 的 <-component > 组 件 而 非 静 态 的 <input > 元 素 , 前 者 可 以 使 用 is prop 来 演 梁 


<textarea> 或 < input> 元 素 。 


(2) 模板 现在 应 该 如 下 所 示 : 


<component 
:is="element" 
class="input" 
:class="inputClass" 
:name="name" 
:type="type" 
:Value.prop="text" 
@input="update" 
:placeholder="placeholder" 
/> 


(3) 我 们 现在 可 以 将 Gescription 文本 区 域 添加 到 NewTicket 表单 中 的 title 输入 框 后 面 : 
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<FormInput 
type="textarea" 
name="description" 
v-model="description" 


placeholder="Describe your problem in details"/> 


@ 绑 定 属性 


相对 于 其 他 元 素 ，<textarea> 具 有 一 些 我 们 想 要 使 用 的 便捷 








属性 ， 例 如 rows 属性 。 我 们 











可 以 为 每 个 属性 创建 一 个 prop, 但 这 很 乏味 。 





性 ， 它 将 获取 组 件 上 的 所 有 非 prop 属 ' 
<FormIinput 


:text="username" 


Vue 将 视 required 为 一 个 
你 可 以 用 $attrs.required 访问 它 ! 














相反 ,我们 








各 使 用 Vue 组 件 方便 的 Sattrs 特殊 属 





生 作为 对 象 ， 其 中 键 为 属性 的 名 称 。 
这 意味 着 ， 如 果 你 的 组 件 上 有 一 个 text prop ， 并 且 在 另 一 个 组 件 中 编 





与 








了 : 











required> 


属性 ， 因 为 它 不 在 FormInput 组 件 公 开 的 prop 列表 中 。 然 后 ， 


v-bing 指令 可 以 使 用 一 个 对 象 , 其 中 的 键 是 要 设置 的 prop 和 属性 的 名 称 。 这 将 是 非常 有 用 的 ! 


(]) 我 们 可 以 在 FormInput .vue 组 件 中 的 <component> 上 编 


<component 


Vv-bind="$attrs" /> 


(2) 现在 可 以 在 NewTicket .vue 组 件 的 description 输入 村 


<FormIinput 
rows="4"/> 


你 应 该 在 泻 染 好 的 HTML 中 看 到 ， 这 个 
上 了 : 


<textarea data-v-ae2eb904="" 
problem in details" 


@ 用 户 操 作 


type="t 
rows="4" class=" 








与 














J 


已 





甘 中 添加 rows 属性 : 











| 





属性 已 经 在 FormInput 组 件 内 的 <textarea> 元 素 


extarea" placeholder="Describe your 
input"></textarea> 


我 们 现在 将 实现 用 户 可 以 在 表单 中 执行 的 一 些 操 作 。 
(在 smartForm 组 件 中 ， 在 输入 框 之 后 添加 这 两 个 按钮 : 





<template slot="actions"> 
<router-link 
tag="button" 
:to="{name: 'tickets'}" 
class="secondary"> 
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Go back 
</router-link> 
<button 

type="submit" 

:disabled="!valid"> 

Send ticket 
</button> 

</template> 


(2) 然后 实现 operation 方法 , 这 与 我 们 在 Login 组 件 中 所 做 的 类 似 。 我们 需要 发 送 PosT 
请 求 到 服务 器 的 /tickets/new 路 径 : 


async operation () { 
const result = await this.$fetch('tickets/new', { 
method: 'POST', 
body: JSON.stringify (1{ 
titre: thls titTe, 
description: this.description, 
小 7) 
} 
this.title = this.description = "" 


}, 


现在 可 以 创建 新 工 单 了 ! 











e 备份 用 户 输入 
为 了 改善 用 户 体 验 ,我 们 应 该 自动 备份 用 户 在 表单 中 输入 的 内 容 ， 以 防 出 现 问题 。 例 如 ， 浏 
览 器 可 能 崩 江 ,或 用 户 可 能 意外 刷新 页 面 。 5 
我 们 将 编写 一 个 mixin， 它 会 自动 将 一 些 数据 属性 保存 到 浏览 器 本 地 存储 中 ， 并 在 创建 组 件 
时 恢复 。 
(1) 在 mixins 文件 夹 中 创建 一 个 新 的 PersistantData.js 文件 。 
(2) 和 其 他 的 mixin 一 样 ， 它 会 有 一 些 参数 ， 所 以 我 们 需要 将 其 作为 一 个 函数 导出 : 


export default function (id, fields) { 
ZA LODO 
} 


id 参数 是 存储 此 特定 组 件数 据 的 唯一 标识 符 。 
首先 ， 我 们 将 在 mixin 中 侦 听 传递 过 来 的 所 有 字段 。 


(3) 为 此 ， 我 们 将 动态 创建 watch 对 象 ， 每 个 键 都 是 字段 ， 值 则 是 将 值 保存 到 本 地 存储 的 处 
理 函 数 : 
return { 


watch: fields.reduce((obj, field) => { 
// 侦 听 处 理 溃 数 
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obj[field] = function (val) { 
localStorage.setIitem( .S${id}.s{field}., JSON.stringify(val)) 
return obj 
jn 


(4) 回 到 NewTicket 组 件 并 添加 mixin: 
import PersistantData from '../mixins/PersistantData' 


export default { 
mixins: |[ 
PersistantData('NewTicket', |[ 
5 
'description', 


mixin 将 侦 听 器 添加 到 组 件 中 ， 使 用 reduce 产生 与 下 面相 同 的 结 


{ 
watch: { 
title: function (val) { 
Let ”field .sc. Stilt Ee: 
localStorage.setItem(.${id}.s{field}., JSON.stringify(val)) 
3 
description: function (val) { 
let field = 'description' 
localStorage.setItem(.${id}.s{field}., JSON.stringify(val)) 
站 
JS 


人 我 们 将 属性 值 保存 为 JSON， 因 为 本 地 存储 只 支持 字符 串 。 


你 可 以 尝试 在 字段 中 输入 内 容 , 然后 打开 浏览 器 开发 者 工具 查看 已 保存 的 两 个 新 的 本 地 存 
储 项 。 
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New ticket 


Foo 











时 2 





民 串 Elements Console Vue Sources Network Performance Memory Application Security Audits 


IG © X |Fiter 





Application 
三 Manifest Key |value 
你 Service Workers NewTicket.description "Bar 
NewTicket.title "Foo 


面 Clear storage 


Storage 
v 器 Local Storage 
32 http://localhost:4000 
* 32 Session Storage 
dn 


(5) 在 mixin 中 ， 还 可 以 设置 在 组 件 被 销毁 时 保存 字段 : 














methods: { 
saveAllPersistantData () { 
for (const field of fields) { 
localStorage.setItem(`${id}.s{field}., 
JSON.stringify (this.sdatalfield])) 


} 
}, 





} 
beforeDestroy () { 
this.saveAllPersistantData() 


让 
(6) 最 后 ， 我 们 需要 在 组 件 创建 时 恢复 值 : 


created () { 
for (const field of fields) { 
const savedValue = localStorage.getItem( .${id}.${field}.) 


if (savedValue !== null) { 
this.s$sdatalfield] = JSON.parse (savedValue) 


} 
}, 


现在 ， 如 果 你 在 表单 中 输入 内 容 ， 然 后 刷新 页 面 ， 已 输入 的 内 容 应 该 仍然 保留 在 表单 中 ! 
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将 会 话 过 期 管理 添加 到 sfetch 中 ， 如 果 在 你 发 送 新 工 单 时 已 经 不 处 于 登录 状 
( 态 ， 将 被 重 定向 到 登录 页 面 。 一 旦 再 次 登录 ， 你 应 该 马上 返回 表单 ， 并 且 所 有 的 
输入 都 还 在 ! 
5.3.3 ”高 级 路 由 特性 
本 章 已 经 接近 尾声 ， 我 们 将 更 深入 地 探索 路 由 1! 
1. 具有 参数 的 动态 路 由 


我 们 将 在 应 用 中 添加 的 最 后 一 个 组 件 是 Ticket ， 它 通过 ID 显示 工 单 的 详细 视图 。 它 会 显 
示 用 户 输入 的 标题 和 说 明 ， 以 及 日 期 和 状态 。 


(1) 创建 一 个 新 的 Ticket.vue 文件 ， 并 添加 带 有 通用 加 载 动 画 和 not found 通知 的 模板 : 











<template> 
<div class="ticket"> 
<h2>Ticket</h2> 


<Loading Vv-if="remoteDataBusy"/> 
<div class="empty" v-else-if="!ticket"> 
Ticket not founa . 
</div> 
<template v-else> 
<!-—- General info --> 
<section class="infos"> 
<div class="info"> 
Created on <strong>{{ ticket.date | date }}</strong> 
he tat 
<div class="info"> 
Author <strong>{{ ticket.user.username }}</strong> 
</div> 
<div class="info"> 
Status <span class="badge">{{ ticket.status }}</span> 
</div> 
</section> 
wl .CONntent, FE=% 
<section class="content"> 
<h3>{{ ticket.title }}</h3> 
<p>{{ ticket.description }}</p> 
</section> 
</template> 
</div> 
</template> 


(2) 然后 为 该 组 件 添加 一 个 id prop: 


<script> 
export default { 
props: { 
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id: { 
type: String, 
required: true, 
} 
} 
} 


</script> 

@ 动态 远程 数据 

id prop 是 我 们 将 从 服务 器 获取 工 单 详情 的 工 单 ID 。 服 务 器 以 /ticket/<id> 的 形式 提供 动 
态 路 由 ， 其 中 <ig> 就 是 工 单 的 ID。 

如 果 能 够 使 用 我 们 的 RemoteData mixin 当然 很 好 ， 但 它 目 前 缺乏 对 动态 路 径 的 支持 ! 我 们 
可 以 做 的 是 传递 一 个 函数 ， 而 不 是 一 个 普通 的 字符 串 作 为 mixin 参数 的 值 。 


(1) 在 RemoteData mixin 中 ,只 需要 修改 在 created 钩子 中 处 理 参数 的 方式 。 如 果 参 数 的 值 
是 一 个 函数 ， 我 们 将 使 用 swatch 方法 来 侦 听 它 的 值 而 不 是 直接 调用 fetchResource 方法 : 

































































created () { 
for (const key in resources) { 
let url = resources [key] 
// 如 果 值 是 一 个 函数 
// 侦 听 它 的 结果 
if (typeof url === 'function') { 
this.$watch(url, (val) => { 
this.fetchResource (key, val) 
Ba 
immediate: true, 
} 
} else { 
this.fetchResource (key, url) 
} 
} 
} 


eS 


不 要 忘记 侦 听 器 的 immediate: true 选项 ， 因 为 我 们 希望 在 侦 听 值 之 前 第 一 
TIP 次 调用 fetchResource。 


(2) 在 Ticket 组件 中 ， 现 在 可 以 使 用 这 个 mixin 根据 ia prop 来 加 载 工 单数 据 : 
import RemoteData from '../mixins/RemoteData' 


export default { 
mixins: [ 
RemoteData({ 
ticket () { 
return ‘ticket/s$s{this.id}. 
} 
站 ) 训 
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让 我 们 在 Tickets 组 件 中 进行 尝试 。 
(3) 添加 带 有 新 id 数据 属性 的 新 Ticket 组 件 : 


import Ticket from './Ticket.vue' 





export default { 
J sie 
components: { 
Ticket, 
人 
data () { 
return { 
id: null, 
} 
5 
} 


(4) 然后 在 模板 中 添加 一 个 Ticket 组 件 : 


<TIERet A Ld 


(5) 在 工 单列 表 中 , 将 链接 的 标题 设 为 工 单 的 标题 , 并 当 链 接 被 点 击 时 设置 ia 数据 属性 为 工 
单 的 ID: 


<a Q@click="id = ticket._id">{{ ticket.title }}</a> 


如 果 点 击 应 用 中 的 工 单 ， 则 应 在 下 面 的 列表 中 看 到 详细 信息 。 














waf 9 
Meow [9 


Test BD 
Ticket 


05/28/2017 


abc 


Warf 


Voluptas dolor accusamus nesciunt tenetur tempora repudiandae. Doloribus ea ut consequuntur aut est. 
Dignissimos neque expedita et et. Cumque sapiente cupiditate modi nam atque pariatur consequatur. In 
magnam velit dolores. Repellat culpa dignissimos ad quo libero dolorum minima. Quos veniam et natus 
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@ 动态 路 由 
为 要 把 工 单 详 情 放 在 男 一 个 路 由 中 ， 所 以 撤消 我 们 在 工 单列 表 组 件 中 所 做 的 操作 。 


这 个 路 由 将 是 工 单列 表 路 由 的 子路 由 ， 路 径 是 /tickets/<id>， 其 中 <iq> 是 所 显示 工 单 的 
ID。 这 要 归功 于 vue-router 的 动态 路 由 匹配 功能 ! 


可 以 使 用 冒号 将 动态 片段 添加 到 路 由 路 径 中 。 然 后 , 每 个 片段 将 暴露 在 路 由 params 对 象 中 。 
以 下 是 带 参 数 的 路 由 示例 。 





















































模 式 示例 路 径 $route .params 的 值 
/tickets/:id /tickets/abc 人 了 
/Lickets/ :id/comments/ :comId /tickets/abc/comments/42 { 1 abe "ComId:. “42 3} 


(1) 在 routerjs 文件 中 为 /tickets 添加 新 的 子路 由 : 


import Ticket from './components/Ticket .vue' 

















const routes = [ 


{ path: '/tickets', component: TicketsLayout, 
meta: { private: true }, children: [ 


{ path: ':id', name: 'ticket', component: Ticket }, 





(2) 在 Tickets 组 件 列 表 中 ， 需 要 将 标题 元 素 的 链接 指向 新 的 路 由 : 


<router-link :to="{name:'ticket', params: { id: ticket. id }}"> 
{{ ticket.title }}</router-link> 


现在 ， 如 果 你 点 击 一 个 工 单 ，$route .params 对 象 的 id 属性 将 被 设置 为 该 工 单 的 ID。 
我 们 可 以 更 改 Ticket 组 件 ， 利 用 计算 属性 〈 而 不 是 prop ) 来 使 用 ID : 


computed: { 
el (六 
return S$route.params.id 
} 
} 


但 这 是 一 个 坏 主意 一 一 我 们 将 组 件 与 路 由 耦合 了 ! 这 意味 着 我 们 无 法 以 其 他 方式 轻松 地 复 用 
它 。 最 好 的 做 法 是 使 用 prop 将 信息 传递 给 组 件 ， 下 面 就 来 这 样 做 吧 ! 

(3) 我 们 要 保留 Ticket 组 件 的 ID prop， 并 告诉 vue-router 用 props 属性 将 所 有 路 由 参 
数 作为 prop 传递 给 它 : 


{path;: "vid”, 7* .1 Props: true }, 
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下 面 的 语法 更 加 灵活 ， 它 基于 一 个 以 路 由 对 象 作为 参数 的 函数 : 


{ path: ':id', /* ... */, props: route => ({ id: route.params.id }) 
5 


基于 对 象 的 男 一 种 语法 也 是 可 行 的 ( 当 prop 是 静态 时 有 用 ): 


{Baths Tid /Amip, /Dropss {Lids “abe “} 


我 们 不 会 使 用 第 三 种 语法 ， 因 为 id prop 应 该 等 于 路 由 的 动态 参数 。 








如 果 你 需要 结合 使 用 静态 和 动态 prop ， 请 使 用 函数 语法 ! 如 果 路 由 参数 和 组 件 
prop 名 称 不 匹配 ， 这 也 很 有 用 。 


现在 ， 0 prop 传递 给 组 件 。 当 点 击 列表 中 的 一 个 工 单 时 ， 你 应 该 看 到 工 单 
的 详细 信息 页 


‘ GuilaumeGHAU | — 旺 
区 口 vue App x 全 


€ GC | © Ilocalhost:4000/tickets/MGPvjSHdaqN7LiKZ 个 


See all tickets New ticket 








Ticket 
05/28/2017 
abc 
Waf 
Voluptas dolor accusamus nesciunt tenetur tempora repudiandae. Doloribus ea ut consequuntur aut est. 
| Elements Console Vue Sources Network Performance Memory ” Application Security Audits >. 
.4 Ready. Detected Vue 2.4.1 从 Components 名 Vuex 党 Events CG Refresh 
Q Filter components Ticket © InspectDOM Q Filterinspected data 
v <AppLayout i 
» <NavMenu data props 
v <TicketsLayout » Sroute: Object id: "MGPvjSHdaqN7LiKZ" 
RouterLink remoteDataLoading: 0 
RouterLink v remoteErrors: Object 


<Ticket> = $me router:view:; /tickets/:id ok 贡 
» ticket: Object 





computed 


hasRemoteErrors: false 
remoteDataBusy: false 




















2. 未 找到 页 面 


目前 ， eS 在 应 用 中 输入 了 无 效 的 URL， 会 遇 到 无 聊 的 空白 页 面 。 vue-router 的 
默认 行为 ， 不 过 它 是 可 以 改变 的 ! 我 们 现在 将 自 定义 应 用 的 “未 找到 ”页 





水 
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(1) 用 一 个 新 的 NotFound.vue 组 件 创建 一 个 更 好 的 “未 找到 ”页 面 : 


<template> 
<main class="not-found"> 
<hl>This page can't be found</h1i> 
<p class="more-info"> 
Sorry, but we can't find the page you're looking for.<br> 
It might have been moved or deleted.<br> 
Check your spelling or click below to return to the 
homepage. 
</p> 
<div class="actions"> 
<router-link tag="button" :to="{name: 'home'}">Return to 
home</router-link> 
</div> 
</main> 
</template> 


<style lang="stylus" scoped> 
.more-info { 
text-align: center; 


} 
</style> 


(2) 现在 ， 只 需要 在 routerjs 文件 中 添加 一 个 匹配 '*' 路径 的 新 路 由 : 


import NotFound from './components/NotFound.vue' 


const routes = [ 


LL 
{ path: '*', component: NotFound }, 5 
] 


这 意味 着 对 于 任意 路 由 ， 都 会 显示 NotFoung 组 件 。 一 个 非常 重要 的 事实 是 ,我 们 把 这 条 路 
由 放 在 routes 数组 的 末尾 , 确保 了 所 有 合法 路 由 在 匹配 最 后 这 一 条 特定 的 全 拦截 路 由 之 前 匹配 。 


现在 可 以 尝试 一 个 不 存在 的 URL ( 例如 /foo )， 会 得 到 以 下 页 面 。 























Home FAQ Support tickets abc Logout 


This page can't be found 


Sorry, but we can't find the page you're looking for. 
lt might have been moved or deleted. 
Check your spelling or click below to return to the homepage. 


Return to home 
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3. 过 渡 
对 路 由 变化 添加 动画 非常 简单 ， 与 我 们 之 前 所 做 的 方式 完全 相同 。 
口 在 AppLayout 组 件 中 ， 使 用 这 个 过 渡 包 装 路 由 器 视图: 


<transition name="fade" mode="out-in"> 
<router-view /> 
</transition> 























router-view 特殊 组 件 将 被 不 同 路 由 的 不 同 组 件 所 取代 ， 从 而 触发 过 渡 。 
4. 滚动 行为 


路 由 器 的 history 模式 允许 我 们 在 路 由 改变 时 管理 页 面 滚 动 。 可 以 每 次 将 位 置 重 置 为 最 高 
位 置 ， 或 者 在 更 改 路 由 之 前 恢复 用 户 的 位 置 〈 在 浏览 需 中 返回 时 ， 这 非常 有 用 )。 











RE 








在 创建 路 由 器 实例 时 ， 可 以 传递 一 个 scrollBehavior 函数 来 获取 3 个 参数 。 


D to 是 目标 路 由 对 象 。 

口 from 是 之 前 的 路 由 对 象 。 

口 savedPosition 是 浏览 器 历史 记录 中 每 个 条 目 自动 保存 的 滚动 位 置 。 在 路 由 改变 之 前 ， 
每 个 新 条 目 都 不 会 有 这 个 值 。 












































scrollBehavior 国 数 期 望 的 返回 值 是 一 个 可 以 有 两 种 不 同形 式 的 对 象 -第 一 种 形式 是 我 们 
想 要 应 用 的 滚动 的 坐标 ， 例 如 : 


{x: 100, y: 200} 














第 二 种 是 我 们 希望 页 面 滚动 到 的 HTML 元 素 的 选择 器 ， 并 带 有 可 选 的 偏 移 量 : 


{ selector: '#fo0', offset: { x: 0, y: 200 } } 


(1) 因此 ， 要 在 路 由 改变 时 滚动 到 页 面 的 项 部， 我 们 需要 写 : 


const router = new VueRouter ({ 
routes, 
mode: 'history', 
scrollBehavior (to, from, savedPosition) { 
return { x: 0, y: 0 } 
Fs 
把 


要 每 次 滚动 到 <h1> 元 素 ， 我 们 可 以 这 样 做 : 
return { selector: 'hl' } 


(2) 相反 ， 我 们 将 检查 路 由 是 否 有 模仿 浏览 器 行为 的 散 列 值 : 
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if (to.hash) { 
return { selector: to.hash } 
} 


return { x: 0, y: 0 } 














(3) 最 后 ， 如 果 有 滚动 位 置 ， 可 以 恢复 该 滚动 位 置 : 


if (savedPosition) { 
return savedPosition 
} 
if (to.hash) { 
return {selector: to.hash} 
} 


returii {XK OF YY OF 


就 这 么 简单 ! 这 个 应 用 现在 应 该 表现 得 像 一 个 旧式 多 页 面 网 站 。 你 之 后 可 以 使 用 偏 移 或 路 由 
属性 来 自 定义 滚动 行为 的 方式 。 











局 l 


5.4 小 结 


在 本 章 中 ， 我 们 借助 Vue 和 官方 vue-router 库 创建 了 一 个 相当 大 的 应 有 用。 我们 创建 了 几 
个 路 由 ,并 将 它们 与 链接 连接 起 来 ， 形成 了 一 个 真正 的 导航 菜单 。 然 后 ,我 们 创建 了 一 个 通用 的 
可 复 用 组 件 来 构建 应 用 表单 ， 这 帮助 我 们 制作 了 登录 和 注册 表单 。 然 后 ,我 们 将 用 户 认证 系统 与 
路 由 带 集 成 在 一 起 ,因此 应 用 能 以 聪明 的 方式 对 页 面 刷 新 或 会 话 过 期 做 出 反应 。 最后, 我们 深入 
了 解 了 vue-router 的 特性 和 功能 ， 以 进一步 加 强 我 们 的 应 用 和 用 户 体 验 。 


虽然 这 个 应 用 已 经 完成 ， 但 你 可 以 自行 改进 它 ! 以 下 是 你 可 以 实施 的 一 些 想 法 。 


口 向 工 单 添 加 评论 。 在 评论 列表 中 显示 每 条 评论 以 及 相应 用 户 的 名 字 。 

口 添加 “关闭 此 工 单 ”按钮 ， 阻 止 用 户 添加 新 评论 。 

口 在 工 单列 表 中 的 已 关闭 工 单 旁边 显示 一 个 特殊 图 标 ! 

口 为 用 户 添加 角色 。 例 如 ， 普 通用 户 可 以 打开 工 单 ,但 只 有 管理 员 用 户 可 以 关闭 它们 。 


在 下 一 章 中 ， 我 们 将 创建 一 个 带 地 理 定位 的 博客 应 用 。 我 们 将 学 习 如 何 使 用 集中 式 state 解 
决 方案 来 扩展 应 用 ， 以 及 如 何 集 成 第 三 方 库 来 扩展 Vue 的 功能 。 
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本 章 ， 我 们 将 构建 第 四 个 应 用 。 这 会 涉及 以 下 新 知识 点 : 


口 使 用 官方 提供 的 Vuex 库 来 集中 管理 应 用 状态 ; 

口 使 用 Google OAuth API 将 应 用 和 用 户 连 接 起 来 ; 

口 使 用 第 三 方 库 vue-googlemaps 将 Google 地 图 集成 到 应 用 中 ; 
口 演 染 函数 和 JSX; 

口 函数 式 组 件 一 一 更 轻 量 、 更 快速 的 组 件 。 


这 个 应 用 叫 作 博客 地 图 , 主要 展示 一 个 可 供用 户 发 布 博客 的 大 地 图 .以 下 是 它 的 一 些 主要 功能 : 


口 一 个 登录 页 ， 用 户 可 使 用 Google 账号 授权 登录 ; 

口 主 界面 显示 一 张 Google 地 图 ， 每 篇 博客 都 在 地 图 上 有 相应 的 标记 ; 

口 用 户 点 击 地 图 上 的 标记 时 ， 右 侧面 板 展示 该 标记 处 的 位 置信 息 、 博 客 、 点 赞 数 ， 以 及 评 
论 列表 等 ; 
口 用 户 点 击 地 图 上 标记 外 的 其 他 地 点 时 ， 侧 边栏 面板 会 显示 一 个 表单 ， 以 便 用 户 在 此 地 点 
新 建 一 篇 博客 ; 

口 应 用 顶 栏 展示 用 户 的 头像 和 姓名 ， 以 及 一 个 定位 按钮 和 一 个 登 出 按钮 。 


最 终 的 应 用 界面 如 下 图 所 示 。 
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Google 认证 和 状态 管理 


在 第 一 部 分 ， 我 们 将 创建 一 个 Vuex store ( 仓库 ) 来 帮助 我 们 管理 应 用 的 状态 。 有 了 Google 
OAuth API， 用 户 可 以 方便 地 通过 Google 账号 登录 我 们 的 应 用 。 接 着 ， 我 们 就 能 使 用 Vuex store 


存储 登录 用 户 的 信息 了 


6.1 











6.1.1 项 目 设 置 


首先 搭建 新 项 目的 基本 结构 。 我 们 将 5 章 中 用 到 的 路 由 以 及 其 他 一 些 特性 


续 使 用 在 第 
1. 创建 应 用 
这 里 ， 我 们 将 搭建 博客 地 图 应 用 的 基本 结构 。 
(1) 参考 第 5 章 中 的 做 法 , 先 使 用 vue-init 初始 化 一 个 Vue 项 目 , 接着 安装 Babel routing、 
Stylus 等 包 : 


vue init webpack-simple geoblog</strong> 





cd geoblog 


npm install 
npm install --save vue-router babel-polyfill 


npm install --save-dev stylus stylus-loader babel-preset-vue 


174 第 6 章 项 目 4: 博客 地 图 





(人 不 要 忘记 在 .babelrc 文件 中 加 上 "vue" 前 级 。 


(2) 移 除 src 目录 中 的 所 有 内 容 。 

(3) 这 里 要 复 用 在 第 5 章 中 制作 好 的 sfetch 插件 ,所 以 将 src/plugins/fetch.js 文件 复制 到 新 项 
目 中 。 

(4) 参考 第 5 章 ， 在 src 文件 夹 中 添加 mainjs 文件 ， 它 将 是 我 们 应 用 的 入 口 : 


import 'babel-polyfill' 

import Vue from 'Vue' 

import VueFetch, { S$fetch } from './plugins/fetch' 
import App from './components/App.vue' 

import router from './router' 

ImDort, * as, filters from /filters" 


























// 过 滤器 

for (const key in filters) { 
Vue.filter(key, filters[key]) 

} 


Vue.use(VueFetch, { 
baseUrl: 'http://localhost:3000/', 
}) 


function main () { 
new Vue ({ 
.. .App, 
el: '#app', 
router, 
} 
} 


main() 


(5) 我 们 还 需要 使 用 moment .js 来 显示 日 期 ， 所 以 使 用 以 下 命令 安装 : 


npm i -Ss moment 





上 面 的 简写 等 同 于 npm install --save。 对 于 开发 依赖 ， 可 以 使 用 npm i -D 
简写 来 代替 npm install --save-dev。 
(6) 像 之 前 一 样 ， 在 src/filters.js 文件 中 创建 一 个 简单 的 日 期 过 滤器 : 
import moment from 'moment 


export function date (value) { 
return moment (value) .format ('L') 


} 


(7) 在 $fetch 插件 中 移 除 对 state.js 文件 的 引用 ， 因 为 这 次 并 不 会 使 用 它 : 
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// 移 除 此 行 


import state from '../state' 


(8) 另外 ， 当 用 户 请 求 接口 返回 403 HTTP 返回 码 时 ,我 们 登 出 用 户 的 方式 也 有 所 不 同 ， 所 
以 需要 移 除 相关 代码 : 


} else if (response.status === 403) { 
// 如 果 会 话 不 再 有 效 
// 我 们 登 出 
xz -TODO 

} else { 





(9) 最 后 ,下载 源 代码 文件 , 并 将 chapter6-full/client/src/styles 中 的 文件 放 到 src/styles 目录 中 。 
2. 路 由 配置 
这 个 应 用 由 3 个 页 面 组 成 : 


口 登录 页 面 ， 包 含 一 个 Sign in with Google 按钮 ; 
口 主页 面 ， 用 来 展示 博客 地 网 ; 
口 404 页 面 。 








下 面 来 创建 主 组 件 ， 并 用 空 组 件 设 置 这 些 页 面 。 
(1) 创建 新 的 src/components 文件 夹 ， 然 后 将 第 5 章 的 NotFouna.vue 组 件 复制 到 其 中 。 
(2) 在 App.vue 文件 中 添加 router-view 组 件 和 主 样 式 文件 : 


<template> 
<div class="app"> 
<router-view/> 








</div> 
</template> 


<style lang="stylus"> 
@import '../styles/main'; 
</style> 





(3) 新 建 GeoBlog.vue 文件 ， 目 前 只 有 几 行 代码 : 


<template> 
<div class="geo-blog"> 
<!-- 更 多 内 容 ， 履 请 期 待 --> 
</div> 
</template> 


(4) 新 建 Login.vue 文件 ， 添 加 Sign in with Google 按钮 ， 并 绑 定 点 击 事件 到 openGoogle- 
Signin 方法 : 
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<template> 
<div class="welcome"> 
<hli>Welcome</h1i> 


<div class="actions"> 
<button @click="openGoogleSignin"> 
Sign in with Google 
</button> 
</div> 
</div> 
</template> 


<script> 
export default { 
methods: { 
OpenGoogleSignin() { 
// TODO 
}, 
} 


</script> 


(5) 参照 第 5 章 新 建 一 个 routerjs 文件 ， 它 将 包含 3 个 路 由 : 


import Vue from 'Vue' 
import VueRouter from 'vue-router' 








import Login from './components/Login.vue' 
import GeoBlog from './components/GeoBlog.vue' 
import NotFound from './components/NotFound.vue' 





Vue.use (VueRouter) 


const routers = [ 
{ path: '/', name: 'home', component: GeoBlog, 
meta: { private: true } }, 
{ path: '/login', name: 'login', component: Login }, 
{ path: '*', component: NotFoungd }, 


const router = new VueRouter ({ 
routers, 
mode: 'history', 
scrollBehavior (to, from, savedPosition) { 
if (savedPosition) { 
return savedPosition 
} 
if (to.hash) { 
return { selector: to.hash } 
} 
return { KX: (0, YY 0 
}) 
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// TODO: 导航 守卫 
// 我 们 很 快 就 会 处 理 


export default router 


确保 路 由 已 被 导入 main.js 文件 并 注入 到 了 应 用 中 。 接 下 来 让 我 们 继续 吧 ! 














6.1.2 ”使 用 Vuex 进行 状态 管理 
本 节 内 容 将 非常 令 人 激动 ， 因 为 我 们 即将 使 用 第 二 个 非常 重要 的 Vue 官方 库 一 一 Vuex! 
有 了 Vuex， 我 们 将 可 以 使 用 一 个 集中 式 store 来 管理 应 用 的 全 局 状态 。 
1. 为 什么 使 用 集中 式 的 状态 管理 


要 明白 这 个 问题 ， 首 先 要 知道 采用 集中 式 状态 管理 解决 方案 的 原因 。 你 可 能 已 经 注意 到 了 ， 
在 上 个 项 目 中 ,我 们 使 用 过 一 个 非常 简单 的 statejs 文件 。 它 有 一 个 对 象 ， 其 中 包含 了 所 有 组 件 
所 需 的 全 局 数据 。Vuex 则 在 此 基础 上 更 进一步 ， 提 出 了 一 些 全 新 的 概念 ， 让 我 们 能 够 规范 且 高 
效 地 管理 和 调试 应 用 的 状态 。 


当 规模 越 来 越 大 时 ， 项目 中 会 有 非常 多 的 功能 和 组 件 ( 也 许 会 超过 100 个 )， 其 中 有 很 多 需 
要 共享 数据 。 随 着 组 件 之 间 的 联系 越 来 越 复杂 , 太 多 的 组 件 需要 同步 数据 ， 最 终 成 为 一 团 乱 麻 。 
在 这 种 情况 下 ， 应 用 的 状态 变 得 不 再 可 控 、 难 以 理解 ， 也 令 迭 代 和 维护 异常 困难 。 举 个 例子 ， 
想象 在 一 棵 有 四 五 个 组 件 的 组 件 树 中 ， 有 一 个 按钮 需要 打开 一 个 距离 很 远 的 侧 边 栏 面板 一 一 你 
可 能 不 得 不 使 用 很 多 事件 和 prop 在 许多 组 件 之 间 上 下 传递 信息 。 实 际 上 这 时 有 两 个 数据 源 ， 意 
味 着 这 两 个 组 件 还 需要 同步 它们 之 间 共 享 的 数据 , 不 然 就 会 因为 组 件 间 信息 的 不 同步 而 导致 应 用 
骨 演 。 
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这 个 问题 的 推荐 解决 方案 是 由 Vue 提供 的 Vuex。 它 从 Flux ( 由 Facebook 开发 ) 的 概念 中 获 
得 灵感 。 另 外 ，Flux 还 演化 出 了 Redux 库 (在 React 社 区 广为人知 )。Flux 由 一 系列 指导 原则 构 
成 ， 阐 明了 如 何 使 用 集中 式 store 来 实现 组 件 之 间 的 单 向 数据 流 。 使 用 这 种 方式 的 优势 在 于 ， 我 
们 可 以 更 加 容易 地 推算 出 应 用 的 逻辑 和 流程 ， 从 而 极 大 地 提升 应 用 的 可 维护 性 。 当 然 , 它 的 缺点 
是 你 可 能 需要 学 习 更 多 的 新 知识 ， 顺 便 多 写 几 行 代 码 。Vuex 通过 有 效 地 实现 Flux 的 一 些 原则 来 
帮助 你 改进 应 用 架构 。 
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些 信 ， 
读 




















一 个 真实 的 例子 是 Facebook 的 通知 系统 。 这 个 聊天 系统 太 过 复杂 ， 以 至 于 系统 很 难 知道 哪 
息 是 已 经 阅读 过 的 。 有 时 候 ， 你 会 莫名 地 收 到 一 条 新 消息 通知 ， 而 这 个 消息 是 你 先前 已 经 阅 


过 的 。 为 了 解决 这 个 问题 ，Facebook 改变 了 原 有 的 应 用 架构 ， 转 而 使 用 了 Flux 的 概念 。 


在 第 一 个 例子 中 , 按钮 和 侧 边 栏 面板 不 需要 在 整个 应 用 中 同步 它们 的 状态 , 而 只 需 使 用 集中 
式 store 来 获取 数据 和 发 送 事 件 




















这 意味 着 它们 并 不 需要 理会 对 方 的 状态 ， 也 不 用 依赖 父 组 件 
或 子 组 件 来 同步 数据 。 也 就 是 说 ， 现 在 我 们 仅 有 唯一 的 数据 源 ， 它 就 是 集中 式 store 
不 需要 考虑 组 件 之 间 的 数据 同步 。 








你 完全 
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集中 式 store 











接 下 来 ,我 们 将 使 用 Vuex 库 及 其 原则 来 搭建 应 用 





O 


尽管 Vuex 很 受 推崇 ， 但 在 非常 小 的 原型 项 目 或 简单 的 小 部 件 项 目 中 ， 你 并 不 一 
定 要 使 用 它 。 
2. Vuex store 
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Vuex 的 核心 元 素 是 store， 














个 特殊 的 对 象 ， 允 许 你 将 应 用 中 的 数据 集中 在 一 个 设计 良 
好 的 模型 中 ,从 而 避免 我 们 在 上 一 节 遇 到 的 问题 。 它 也 将 是 后 面 进行 数据 存储 和 数据 处 型 
架构 。 





store 包含 如 下 信息 : 





的 主要 


D state， 存 储 应 用 状态 的 响应 式 数 据 对 象 ; 
口 getter， 等 价 于 store 的 计算 








属性 ; 
口 mutation， 用 来 改变 应 用 状态 的 函数 ; 


























D action， 通 常用 来 调用 异步 API 的 函数 ， 然 后 使 用 mutation 改变 数据 。 
一 个 完整 的 store 看 起 来 应 该 是 这 样 的 。 
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后 端 API 


action 


Vue 组 件 mutation ! 开发 者 工具 














文 些 新 名 词 ， 我 们 先 创建 一 个 store 来 熟悉 这 些 新 的 概念 。 你 会 发 现 它 并 没 
有 看 起 来 那么 
(1) 首先 ， 使 用 npm i -Ss vuex 命令 下 载 Vuex。 然 后 创建 一 个 新 的 store 文件 夹 ， 并 在 里 面 
添加 index.js 文件 用 来 安装 Vuex 插件 : 
import Vue from 'Vue' 
import Vuex from 'vuex' 
Vue.use (Vuex) Eg 


(2) 使 用 Vuex .Store 构造 函数 创建 store: 


const store = new Vuex.storel({ 
// TODO 选项 
}) 


(3) 像 之 前 导出 路 由 器 一 样 导 出 store: 


export default store 


(4) 在 main.js 文件 中 ， 导 入 store: 


import store from './store' 
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6 当 Webpack 检测 到 store 为 文件 夹 时 ,会 自动 导入 其 中 的 index.js 文件。 


(5) 为 了 让 store 在 应 用 中 后 效 ， 我 们 还 需要 像 注 入 路 由 需 一 样 注 入 它 : 


new Vue ({ 
i 
el: '#app', 
router, 
// 注入 store 
store, 


}) 


(6) 现在 所 有 的 组 件 都 可 以 使 用 $store 这 个 特殊 的 属性 访问 store 了 ， 就 像 vue-router 中 
的 特殊 对 象 Srouter 和 sroute 一 样 。 比 如 ， 你 可 以 在 组 件 中 这 样 写 : 


this.sstore 
3. state 是 唯一 数据 源 


state 是 store 的 主要 组 成 部 分 ， 它 展示 了 应 用 中 组 件 的 所 有 共享 数据 。Vuex 的 第 一 个 原则 就 
是 ，state 是 共享 数据 的 唯一 数据 源 。 它 规定 所 有 组 件 都 必须 从 这 个 唯一 数据 源 中 读 取 数据 ， 而 且 
保证 读 取 的 数据 总 是 正确 的 。 


就 目前 而 言 ，state 只 包含 一 个 user 属性 ， 负 责 保 存 已 登录 用 户 的 用 户 信息 。 






























































(1) 在 store 选项 中 添加 state 函数 ， 该 函数 返回 一 个 对 象 : 


const store = new Vuex.Storelt{ 
state() { 
return { 
user: null, 
} 
sy 
} 





Vuex 的 男 一 个 非常 重要 的 原则 是 ，state 是 只 读 的 。 你 不 应 该 直接 修改 它 ， 否 则 将 失去 使 用 
Vuex 的 意义 ( 让 共享 状态 易于 预测 ) 如 果 应 用 中 的 许多 组 件 都 能 随意 修改 state， 那 么 你 将 很 难 
追踪 数据 的 流向 , 使 用 开发 者 工具 调试 代码 也 将 变 得 困难 。 因 此 ,改变 状态 的 唯一 途径 就 是 通过 
mutation ， 我 们 很 快 就 会 接触 到 它 。 


(2) 为 了 读 取 状态 ， 我 们 需要 在 components 文件 夹 中 新 建 AppMenu .vue 组 件 。 它 将 展示 用 
户 的 信息 、 Center-on-user 按钮 和 logout 按钮 : 



































<template> 
<div class="app-menu"> 
<div class="header"> 
<i class="material-icons">place</i> 
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GeoBlog 
</div> 


<div class="user"> 
<div class="info" v-if="user"> 
<span class="picture" v-if="userPicture"> 
<img :src="userPicture" /> 
</span> 
<span class="username">{{ user.profile.displayName }} 
</span> 
</div> 
<a Qclick="centerOnUser"> 
<i class="material-icons">my_location</i> 
</a> 
<a @click="logout"> 
<i class="material-icons">power_settings new</i> 
</a> 
</div> 
</div> 
</template> 


<script> 
export default { 
computed: { 
user () { 
return this.s$store.state.user 
} 
userPicture () { 
return null // TODO 
yy 
} 
methods: { 
centerOonUser () { 
// TODO 
} 
logout () { 
// TODO 
}s 
i 
} 


</script> 





user 对 象 将 接收 Google 返回 的 profile 属性 ， 里 面包 含 用 户 的 姓名 和 头像 。 


(3) 在 GeoBlog .vue 中 添加 这 个 新 的 AppMenu 组 件 : 


<template> 
<div class="geo-blog"> 
<AppMenu /> 
<!-- 地 图 和 内 容 --> 
</div> 
</template> 
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<script> 
import AppMenu from './AppMenu.vue' 


export default { 
Components : { 
AppMenu, 
Fs 
} 


</script> 


到 目前 为 止 ， 用 户 还 没有 登录 ， 所 以 这 里 暂时 没有 任何 显示 。 





4. 使 用 mutation 修改 状态 

由 于 state 被 认为 是 只 读 的 ,所 以 现在 修改 状态 的 唯一 方式 就 是 通过 mutation。 可 以 把 mutation 
看 成 一 个 同步 函数 ， 它 接收 state 作为 第 一 个 参数 ， 同 时 接收 一 个 可 选 的 载荷 (payload ) 参数 ， 
以 此 来 更 新 state。 这 意味 着 你 不 应 该 在 mutation 中 使 用 异步 操作 (如 服务 器 请 求 )。 




















(1) 让 我 们 添加 第 一 个 mutation ， 它 的 类 型 为 'user' ， 将 负责 更 新 state 中 的 用 户 : 


const store = new Vuex.Storelt{ 
state. () A war 


mutations: { 
user: (state, user) => { 
state.user = user 
2 
ye 
}) 


Vuex 中 的 mutation 和 事件 很 像 ， 它 们 都 有 一 个 类 型 (这 里 是 user ) 和 一 个 处 理 
了 马 数 。 
表明 我 们 在 调用 mutation 的 用 词 是 提交 ( commit )。 就 像 事 件 一 样 ， 我 们 也 不 能 直接 调用 
mutation， 而 是 通过 store 来 触发 对 应 于 某 个 具体 类 型 的 mutation。 


要 触发 mutation 处 理 函 数 ， 我 们 需要 使 用 commit 方法 : 














store.commit ('user', userData) 
(2) 试 着 在 AppMenu 组 件 的 logout 函数 中 使 用 上 述 方法 ， 以 便 测试 这 个 mutation : 


Jogout () { 
// TODO 
if (!this.user) { 
const userData = { 
profile: { 
displayName: 'Mr Cat', 
jy 
} 
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this.$store.commit ('user', userData) 
} else { 
this.$store.commit ('user', null) 
} 
} 


现在 点 击 logout 按钮 ， 就 应 该 能 看 到 用 户 信息 的 切换 了 。 
@ 严格 模式 


mutation 的 同步 特性 是 出 于 调试 的 目的 。 使 用 同步 的 方式 能 让 状态 易于 追踪 ， 还 可 以 借助 开 
发 者 工具 生成 的 快照 方便 地 调试 应 用 中 的 误 操 作 。 但 如果 你 在 mutation 中 使 用 了 异步 调用 , 调试 
器 将 无 法 追踪 在 mutation 之 前 和 之 后 的 状态 变化 。 


(1) 为 了 避免 在 mutation 中 使 用 异步 调用 ， 你 可 以 开启 严格 模式 : 


const store = new Vuex.Store (1{ 
strict: true, 
VA 

} 


在 严格 模式 下 ， 当 状态 被 mutation 中 的 异步 操作 修改 时 , 为 了 保证 调试 工具 正常 工作 , 这 将 
会 抛 出 一 个 错误 。 


请 不 要 在 生产 环境 下 启用 严格 模式 ， 以 免 影响 性 能 。 使 用 这 行 语句 即 可 做 到 这 一 
点 : strict: process.env.NODE_ENV !== | ， 其 中 的 标准 环 

6 人 境 变量 NODE_ENV 会 告诉 你 当前 的 开发 环境 是 什么 (通常 是 开发 、 测 试 或 生产 
环境 )。 


(2) 下 面 在 1ogout 方法 中 试 着 直接 修改 状态 : 


logout () { 
if (!this.user) { 
A 
this.$store.state.user = userData 
} else { 
this.$store.state.user = null 
} 
} 


再 次 点 击 logout 按钮 ， 并 打开 浏览 器 控制 台 。 你 会 看 到 Vuex 抛 出 了 错误 ， 原因 是 你 没有 在 
合适 的 mutation 内 修改 状态 。 












































@ =[Vue warn]: Error in callback for watcher "function {) { return this. data.s$s$state }": "Error: [vuex] Do 
not mutate vuex store state outside mutation handlers." 











@ 调试 利器 
使 用 Vuex 的 一 大 好 处 就 是 良好 的 调试 体验 。 特 别 是 在 开发 复杂 的 应 用 时 ， 你 可 以 追踪 状态 
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的 每 一 次 修改 ， 这 将 极 大 地 提升 你 的 调试 效率 。 


将 1ogout 方法 的 代码 回 退 到 先前 使 用 mutation 的 版 本 , 然后 点 击 几 次 logout 按钮 , 再 打开 
Vue 开发 者 工具 并 切换 到 Vuex 选项 卡 ， 你 会 看 到 提交 到 store 的 mutation 列表 。 





.4 Ready. Detected Vue 2.4.2 从 Components 名 Vuex Ee Events@ CG Refresh 
Q Filtermutations $ CommitAll © RevertAll @ Recording 口 Export 口 Import 
Base State 01:41:17 state getters 人 


v user: Object 
user A » profile: Object 


USer 
mutation 


inspected 


type: "user" 
v payload: Object 
» profile: Object 














右边 记录 的 是 选中 的 mutation 及 其 荷载 ( 传人 的 参数 ) 的 状态 。 


只 需要 将 鼠标 移 到 一 个 mutation 上 ， 然 后 点 击 Time Travel 图 标 按钮 ， 你 就 可 以 回 退 到 应 用 
任何 一 个 状态 的 快照 。 





User 2 © .| 17 :15 :3 


时 间 旅 行 到 该 状态 


EDE active We 











上 面 的 操作 会 让 你 的 应 用 立马 回 到 原来 的 状态 ! 现在 你 可 以 一 步 步 尝 试 , 重 现在 应 用 中 提交 
mutation 时 ee ， 


5. 使 用 getter 计算 和 返回 数据 
可 以 将 getter 看 成 store 的 计算 属性 .这些 函 数 将 state 和 getter 作为 参数 ,返回 一 些 状 态 数 据 。 
(1) 我 们 先 创建 一 个 返回 state 中 用 户 的 user getter: 


const store = new Vuex.Store ({ 





A ss 
getters: { 

user: state => state.user, 
站 


}) 
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(2) 在 AppMenu 组 件 中 ， 可 以 使 用 这 个 getter 代替 之 前 直接 获取 状态 的 方法 : 


user () { 
return this.$store .getters .USeL 


} ， 


虽然 这 和 之 前 看 起 来 并 没有 什么 区 别 ， 但 我 们 不 推荐 直接 获取 状态 你 应 该 总 是 使 用 
getter， 因 为 它 可 以 让 你 在 修改 获取 数据 的 方式 时 无 须 修 改 使 用 此 数据 的 组 件 。 例 如 ， 你 可 以 改 
变 state 的 结构 和 相应 的 getter， 同 时 不 对 组 件 产 生 任 何 影响 。 


(3) 我 们 再 添加 一 个 userPicture getter， 为 后 面 处 理 真正 的 Google 用 户 信息 做 准备 : 











userPicture: () => null, 
(4) 在 AppMenu 组 件 中 ， 可 以 这 样 使 用 它 : 
USerPicture () { 


return this.$store.getters.userPicture 


入 
6. 使 用 action 操作 store 


store 的 最 后 一 个 组 成 元 素 是 action。 和 mutation 的 不 同 之 处 是 ，action 并 不 直接 修改 状态 。 
然而 action 不 仅 可 以 提交 mutation， 还 能 做 异步 操作 。 和 mutation 类 似 ，action 的 声明 由 一 个 类 
型 和 一 个 处 理 函 数 构成 。 这 个 处 理 函 数 不 能 被 直接 调用 ， 你 需要 像 这 样 分 发 一 个 action 类 型 : 


store.dispath('action-type', payloadObject) 


action 的 处 理 函 数 接收 两 个 参数 ， 


A 








口 context, 它 提供 commit、 dispatch、state 以 及 链接 到 store 的 getters 工具 也 数 ; 
口 payload， 它 是 aispatch 分 发 时 带 上 的 参数 。 


(1) 创建 我 们 的 前 两 个 action ， 类 型 为 1ogin 和 1ogout， 它 们 不 带 任 何 参 数 : 


const store = new Vuex.Storel(t{ 
人 
actions: { 
login ({commit}) { 
const userData = { 
profile: { 
displayName: 'Mr Cat', 
} 

cormmjit ('user'，USserData) 


} ， 























logout ({commit}) { 
commit('user', null) 


}, 
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} 
}) 


(2) 在 AppMenu 组 件 中 ， 在 这 两 个 按钮 的 事件 处 理 函 数 中 加 上 测试 代码 : 


methods: { 
centerOnUser () { 
// TODO 
// 测试 登录 action 
this.$store.dispatch('login') 
> 
Jogout () { 
this.$store.dispatch('logout') 
人 
二 


现在 ,点击 菜 单 上 的 按钮 ， 你 将 看 到 用 户 个 人 资料 的 出 现 和 消失 。 





和 getter 类 似 ， 在 组 件 中 你 应 该 总 是 使 用 action 而 不 是 mutation。 因 为 当 你 的 应 
用 需要 更 新 迭代 时 ， 人 和 修改 action 中 的 代码 肯定 比 修改 组 件 中 的 代码 要 来 得 更 好 
(比如 ， 当 你 需要 额外 调用 一 个 新 的 mutation 时 )。 要 把 action 看 成 应 用 逻辑 的 
抽象 ! 

7. 辅助 函数 


Vuex 提供 了 一 系列 辅助 函数 供 添加 state 、getter 、mutation 以 及 action。 出 于 将 组 件 中 的 状态 
和 逻辑 分 离 的 考虑 ， 我 们 只 应 该 在 组 件 中 使 用 getter 和 action， 所 以 只 会 用 到 mapGetters 和 


mapActionso 


这 些 辅助 函数 将 帮助 我 们 生成 相应 的 getter 计算 属性 和 action 方法 ， 这 样 就 不 用 每 次 都 输入 
this.sstore.getters 和 this.store.dispatch 了 。 辅助 函数 的 参数 可 以 是 以 下 二 者 之 一 : 


类 型 的 数组 ， 其 中 的 每 一 个 元 素 对 应 于 组 件 中 的 同名 数据 ; 
口 人 其 中 的 键 是 组 件 中 数据 的 别名 ， 值 则 是 类 型 。 


例如 ， 下 面 的 写法 使 用 了 数组 的 语法 : 


mapGetters(['a', 'b']) 


它 等 价 于 : 


















































a () { return this.Sstore.getters.a }, 
b () { return this.s$store.getters.b }, 








下 面 的 写法 使 用 的 则 是 对 象 语法 : 


mapGetters({ x: 'a', y: 'b' }) 
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它 等 价 于 : 

{ 
x () { return this.s$st 
y () { return this.s$st 


} 


ore.getters.a }, 
ore.getters.b }, 











让 我 们 在 AppMenu 组 件 中 使 用 这 些 辅 助 函数 吧 o 


(1) 首先 在 组 件 中 导入 : 











import { mapGetters, mapActions } from 'vuex' 


(2) 然后 ， 将 组 件 修改 为 : 


export default { 





computed: mapGetters ( [ 


7 了 
'userPicture', 

| 

methods: mapActions({ 


centerOnUser: 'login', 


logout: 'logout', 
I 
} 








现在 ， 该 组 件 中 将 拥有 两 个 返回 对 应 store getter 的 计算 属性 ， 以 及 两 个 分 别 分 发 login 和 


logout action 类 型 的 方法 。 


6.1.3 ”用户 状态 





在 本 节 中 ， 我 们 将 添加 用 户 系统 ， 以 便 用 户 通过 Google 账号 登录 和 登 出 。 


1. 设置 Google OAuth 





在 使 用 Google API 之 前 ， 
(1) 打开 开发 者 控制 面板 : 


我 们 首先 要 在 Google 开发 者 控制 面板 中 配置 一 个 新 的 项 目 。 


console.developers.google.com。 





(2) 使 用 页 面 上 方 的 选择 项 目下 拉 框 创建 一 个 新 项 目 ， 同 时 给 新 项 目 命名 。 当 项 目 创建 结 


后 ， 选 中 它 。 


(3) 为 了 获得 用 户 的 个 人 资料 ， 我 们 还 需要 让 Google+ API 生 效 。 进 入 API 和 服务 | 库 ， 然 后 


点 击 社交 区 域 下 方 的 Google+ 
将 看 到 一 个 控制 面板 和 一 些 空 





API。 进 入 Google+ API 页 面 后 ， 点 击 启用 按钮 。 启 动 成 功 后 ,你 
图 表 。 


(4) 下 面 需要 创建 一 个 应 用 凭据 来 让 Google 验 明 我 们 服务 器 的 真实 性 。 进 入 API 和 服务 | 凭据 








显示 的 产品 名 称 。 





























然后 选择 OAuth 同意 屏幕 选项 卡 。 填 写 表 单 时 ， 请 确保 选择 了 电子 邮件 地 址 ， 同 时 填写 向 用 户 
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(5) 选中 凭据 选项 卡 ， 点 击 创建 凭据 下 拉 框 ， 然 后 选择 OAuth 客户 端 1D。 接 下 来 ,选择 应 用 
类 型 为 网 页 应 用 ， 然 后 输入 URL， 它 将 被 添加 到 已 获 授权 的 JavaScript 来 源 中 。 我 们 暂且 输入 
http://localhost:3000 ， 按 下 回 车 键 将 其 添加 到 列表 中 。 然 后 添加 Google 重 定 向 的 URL: 
http://localhost:3000/auth/google/callback， 按 下 回 车 键 。 该 URL 将 映射 到 服务 器 上 的 一 个 特殊 路 
由 。 完 成 后 ， 点 击 创建 按钮 。 














RPI API 和 服务 凭据 
好， 信息 中 心 人 并 本 总 层 昔 ebay 
pi 凭据 。 OAuth 同意 屏幕 。 ”网 域 验 证 
进 库 
API 吉 亲 
ov ”多 所 医用 简单 的 AP 安 钼 来 标识 您 的 项 目 ， 以 便 检 查 配 村 和 访问 权 了 





OAuth 亦 户 端 ID 
征 得 用 





蕊 ”创建 0Auth 客户 端 ID 


对 于 使 用 OAuth 2.0 协议 调用 Google API 的 应 用 ， 您 可 以 使 用 OAuth 2.0 客户 端 ID 生成 访问 令 牌 。 该 令 牌 包 合 
唯一 标识 符 。 请 参阅 设置 OAuth 2.0 以 了 解 详情 。 
应 用 类 型 
量 网 页 应 用 
Android 了 解 详情 
Chrome 应 用 了 解 详情 
i0S 了 解 详情 
其 他 


名 称 
网 页 客户 端 1 


限 









或 重 定 向 URI 了 解 详情 


0 到 OAuth 同意 设置 中 已 获 授权 的 网 域 列表 中 。 






已 获 授权 的 JavaScript 来 源 
若 合 措 求 使 用 . 


适合 措 URI， 其 中 不 得 包 合 通配符 (https://*.example.com) 或 路 径 


淮 端 口 ， 则 必须 在 来 源 URI 中 包 合 该 端口 。 
http://localhost:3000 下 
https://www.example.com 


已 蒂 权 的 重 定向 URI 


适用 
访问 






ost:3000/auth/google/callback 盲 





https://www.example.com 














取消 

















(6) 将 包含 客户 端 ID 和 密 钥 的 凭据 复制 或 者 下 载 到 本 地 ,不 要 共享 给 团队 以 外 的 其 他 人 。 客 
户 端 ID 和 密 钥 将 是 Google API 认 证 应 用 的 凭证 ,用 户 通过 Google 登录 页 面 登录 成 功 后 会 显示 应 
用 的 名 字 。 

(7) 下载 本 项 目的 API 服 务 端 代码 (文件 夹 名 为 chapter6-full/server )， 将 其 解压 到 Vue app 日 
录 外 。 在 该 新 文件 夹 下 打开 一 个 新 的 终端 ， 使 用 下 面 的 命令 安装 服务 器 依赖 : 


npm install 
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(8) 下 一 步 ， 使 用 之 前 从 Google 开发 者 控制 台 下 载 的 凭据 来 配置 GoocLE_cLIENT_ID 和 


GOOGLE_CLIENT_SECRET 这 两 个 环境 变量 。 例 如 ， 在 Linux 系统 中 : 


export GOOGLE_CLIENT_ID=XXX 
export GOOGLE_CLIENT_SECRET=xxx 




















在 Windows 系统 中 : 


Set GOOGLE_CLIENT_ID=XXX 
Set GOOGLE_CLIENT_SECRET=XXX 








可 


0 每 次 在 新 的 终端 会 话 中 启动 服务 器 时 ， 都 需要 重新 配置 环境 变量 。 


(9) 使 用 start 脚本 启动 服务 器 : 


npm run start 


2. 登录 按钮 

Login 组 件 将 包含 一 个 可 以 打开 Google 登录 页 弹 框 的 按钮 。 这 个 弹 框 首先 载 人 Node.js 服务 
兢 的 一 个 路 由 ， 该 路 由 会 重 定向 到 Google 授权 页 面 。 当 用 户 通过 授权 页 面 登录 成 功 后 ， 这 个 弹 
框 会 再 次 重 定向 到 我 们 的 Node.js 服务 器 ， 接 着 在 关闭 前 发 送 一 个 消息 到 主页 面 。 

(1) 找到 openGooglesignin 方法 ,在 其 中 添加 打开 /auth/google 路 由 弹 框 的 逻辑 ， 这 
个 路 由 会 重 定向 到 Google: 


openGoogleSignin () { 
const url = 'http://localhost:3000/auth/google' 


const name = 'google_ login' 
const specs = 'width=500,height=500' 
window.open (url, name, specs) 


}3 

当 用 户 成 功 通 过 Google 认证 后 , 服务 器 的 回调 页 面 会 使 用 标准 的 postMessage API 发 送 一 个 
消息 到 Vue 的 应 用 窗口 。 

在 接收 到 消息 时 ， 我 们 需要 检查 消息 来 源 是 否 正 确 (localhost:3000 代表 的 我 们 的 服务 器 )。 









































(2) 新建 一 个 nandleMessage 方法 来 处 理 消息 : 


handleMessage ({data, origin}) { 





Lf “(Origin == "Http /Localhost :3000"). 4 
return 

} 

if (data === 'success') { 


this.login() 
} 
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(3) 为 了 获取 用 户 数据 ， 我 们 需要 分 发 类 型 为 1ogin 的 action。 先 在 组 件 中 添加 它 : 
import { mapActions } from 'vuex' 


export default { 
methods: { 
.. .mapActions ( [ 
'login', 


(4) 使 用 mounted 生命 周期 钩子 (不 在 methods 中 ) 来 添加 对 window 事件 的 监听 : 


mounted () { 
window.addEventListener('message', this.handleMessage) 


}, 


(5) 最 后 ， 别 忘 了 在 组 件 被 销 左 时 移 除 这 个 监听 带 : 


beforeDestroy () { 
window.removeEventListener('message', this.handleMessage) 


和 
3. store 中 的 用 户 


此 前 , 我 们 已 经 在 store 中 定义 过 两 个 跟 user ( 用 户 信息 ) 相关 的 action 一 一 login 和 logout， 
现在 就 来 实现 它们 。 同 时 ,本 节 还 将 添加 一 些 跟 用 户 相 关 的 功能 点 ， 比 如 在 应 用 打开 时 加 载 用 户 
会 话 ， 然 后 在 顶 栏 中 显示 用 户头 像 。 


(1) 下 面 来 实现 1ogin action, 它 将 和 第 5 章 中 所 做 的 那样 获取 用 户 数据 , 然后 将 数据 提交 给 
state ( 不 要 忘记 导 人 Sfetch): 


async login ({ commit }) { 
tr 
const user = await $fetch('user') 
commit('user', user) 











if (user) { 
// 重 定向 到 对 应 的 路 由 ， 或 返回 首页 
router.replace (router.currentRoute.params.wantedRoute || 
{ name: 'home' }) 
} 
} catch (e) { 
console.warn(e) 
} 
3 


如 你 所 见 ，action 能 够 进行 异步 操作 ， 比 如 这 里 从 服务 器 请 求 了 数据 。 在 用 户 连 接 成 功 后 ， 
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将 跳 转 到 相应 的 页 面 或 首页 ， 可 参见 第 5 章 。 
(2) 1ogout action 会 向 服务 器 发 送 /1ogout 请 求 。 如 果 当 前 路 由 为 私有 路 由 ,页 面 将 跳 转 到 
登录 界面 : 


logout ({ commit }) { 
commit('user', null) 





$fetch('logout') 


// 如 果 这 个 路 由 是 私有 的 
// 我 们 跳 转 到 登录 页 面 
if (router.currentRoute.matched.some(r => r.meta.private)) { 
router.replace({ name: 'login', params: { 
wantedRoute: router.currentRoute.fullPath, 
:0 
} 
} 


根据 之 前 在 routerjs 文件 中 的 设置 ， 当 用 户 在 home 路 由 上 时 ， 页 面 将 跳 转 到 登录 界面 。 
@ 路 由 适 配 
我 们 现在 还 需要 植 人 导航 守卫 ( 见 第 $ 章 )， 这 样 用 户 登 录 后 才能 进入 私有 路 由 。 


在 routerjs 文 件 中 ， 植 人 beforeEach 导航 守卫 ， 并 使 用 user 的 getter 来 检测 用 户 是 否 已 
成 功 登 录 。 这 里 的 实现 跟 刚 才 非 常 相似 : 


import store from './Store' 























router.beforeEach( (to, from, next) => { 
console.log('to', to.name) 


const user = store.getters.user 
if (to.matched.some(r => r.meta.private) && !user) { 
next ({ 
name: 'login', 


params: { 
wantedRoute: to.fullPath, 
} 
} 
return 
} 
if (to.matched.some(r => r.meta.guest) && user) { 
next ({ name: 'home' }) 
return 
} 
next () 
} 


@ 调整 $Sfetch 插件 
当 用 户 会 话 过 期 时 ， 我 们 需要 用 户 重新 登录 ， 因 此 sfetch 插件 同样 需要 做 一 些 修改 。 
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(1) 在 这 种 情况 下 ( 403 时 )， 我 们 只 需要 分 发 1ogout action : 
} else if (response.status === 403) { 

// 如 果 会 话 不 再 有 效 

// 我 们 登 出 

store.dispatch('logout') 
} else { 


(2) 别 忘 了 导入 store: 

import Store from '../store' 

现在 你 可 以 试 着 使 用 Google 登录 应 用 了 ! 

@ 启动 时 检测 用 户 会 话 

应 用 启动 时 ， 首 先 需 要 检测 用 户 是 否 有 活动 的 会 话 ， 参 照 第 $ 章 。 

(1) 为 此 ， 先 新 建 一 个 常用 的 init action。 它 现在 只 会 分 发 一 个 1ogin action， 但 最 终 可 能 
分 发 更 多 的 action : 

actions: { 

async init ({ dispatch }) { 


await dispatch ('login') 


}, 











LD a 
}, 


(2) 在 main.js 文件 中 ， 分 发 init action 并 等 待 它 完成 : 


async function main () { 
await store.dispatch('init') 


new Vue ({ 
































.. .App, 

el: '#app', 

router, 

store, 

3 

lj 
main() 
现在 ,不 用 返回 登录 界面 就 能 通过 Google 登录 并 刷新 页 面 了 。 
@ 用 户头 像 





最 后 ， 我 们 来 实现 userPicture getter， 它 将 返回 Google 个 人 资料 中 photos 数组 的 第 一 
A 
个 元 素 : 
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userPicture: (state, getters) => { 
const user = getters.user 
if (user) { 
const photos = user.profile.photos 
if (photos.length !== 0) { 
return photos[0] .value 
} 
} 


如 你 所 见 ， 我 们 可 以 通过 第 二 个 参数 在 其 他 getter 中 复 用 现 有 的 getter! 


现在 登录 后 应 该 能 看 到 完整 的 工具 栏 了 。 








9 GeoBlog et ET A 
4 





4. 同步 store 和 路 由 





我 们 还 可 以 使 用 官方 提供 的 vuex-router-sync 包 将 路 由 集成 到 store 中 。 它 会 将 当前 路 由 
暴露 到 state ( state.route ) 中 ， 同 时 在 每 次 路 由 改变 时 都 提交 一 个 mutation。 


(1) 使 用 npm 安装 它 : 


npm i -S vuex-router-sync 





(2) 使 用 前 ， 先 导入 mainjjs 文件 中 的 sync 方法 : 
import { Sync } from 'vuex-router-sync' 


sync (store, router) 





现在 ， 你 可 以 使 用 state.route 对 象 获取 当前 路 由 信息 ， 还 可 以 使 用 时 间 旅 行 调试 它 。 





6.2 ” 骨 入 Google 地 图 
在 第 二 部 分 ， 我 们 将 在 首页 添加 一 张 地 图 ， 然 后 使 用 Vuex store 控制 它 的 显示 。 








6.2.1 安装 








为 了 集成 Google 地 图 ， 我 们 需要 使 用 一 套 API 和 一 个 第 三 方 的 vue-googlemaps 包 。 
1. 获取 API 密 钥 


要 在 应 用 中 使 用 Google 地 图 ， 我 们 先 启动 对 应 的 API， 然 后 生成 一 个 API 密 钥 : 
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(1) 在 Google 开发 者 控制 面板 中 ， 返 回 到 API 和 服务 | 库 ， 点 击 地 图 下 方 的 Google Maps 
JavaScript API。 进 入 页 面 后 ， 点 击 启动 按钮 。 
(2) 然后 到 凭据 选项 卡 创 建 一 个 新 的 API 密 钥 。 


2. 安装 依赖 包 
现在 我 们 安装 vue-googlemaps 库 ， 它 将 帮助 我 们 集成 Google 地 图 到 应 用 中 。 
(1) 在 应 用 中 ， 使 用 npm 安装 它 : 


npm i -S vue-googlemaps 











(2) 在 主 文件 main.js 中 ， 使 用 之 前 创建 的 Google API 密 钥 启 动 它 : 
import VueGoogleMaps from 'vue-googlemaps' 


Vue.use (VueGoogleMaps, { 


load: { 
apiKey: 'your_ api_key_here', 
libraries: ['places'], 


}, 
}) 


的 这 里 还 指明 了 加 载 Google 地 图 的 Places 库 ， 它 将 有 助 于 我 们 展示 地 址 的 信息 。 


现在 我 们 就 可 以 访问 库 里 的 组 件 了 ! 
(3) 在 app.vue 组 件 中 ， 添 加 库 的 样式 文件 : 


<style lang="stylus"> 

@import '~vue-googlemaps/dist/vue-googlemaps.css' 
@import '../styles/main' 

</style> 


4 Stylus 不 支持 绝对 路 径 ， 因 此 在 访问 这 个 npm 模块 时 ， 我 们 使 用 了 -~ 字符 告诉 


styles-loader 这 是 一 个 绝对 路 径 。 





6.2.2 ”添加 地 图 
地 图 是 本 应 用 的 核心 组 件 ， 它 将 包含 以 下 功能 : 


口 用 户 位 置 的 指示 符 ; 
口 每 篇 博客 的 标注 ; 
口 当前 要 添加 博客 的 标注 预览 。 


现在 ,我 们 先 在 主页 上 添加 一 张 简单 的 地 图 。 
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(1) 创建 BlogMap .vue 组 件 ， 并 设置 center 和 zoom 属 1 


<template> 
<div class="blog-map"> 
<googlemaps-map 
:Center="center" 
:Zoom="Zoom" 
:options="mapOptions" 
@update:center="setCenter" 
@update:zoom="setZoom" 
</div> 
</template> 


<script> 
export default { 
data() { 
return { 
center: { 
lat e488538302: 
lng: 2.2982161, 
} 
Zoom: 15, 
} 
}, 


computed: { 
mapOptions() { 
return { 
fullscreenControl: false, 


} 
} 


methods: { 
setCenter(value) { 
this.center = value 
} 
setZoom(value) { 
this.zoom = Value 
} 
> 
} 


</script> 


(2) 然后 ， 将 其 添加 到 GeoBlog .vue 组 件 中 : 


<template> 
<div class="geo-blog"> 
<AppMenu /> 
<div class="panes"> 
<BlogMap/> 
<!-- 其 他 内 容 --> 


</div> 
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</div> 
</template> 


添加 前 别 忘 了 先导 入 它 ， 并 将 它 放 在 components 选项 中 ! 


6.2.3 ”将 BlogMap 连接 到 store 
目前 跟 地 图 相关 的 状态 仅 存在 于 BlogMap 组 件 中 一 一 让 我 们 将 其 添加 到 store 中 ! 
1. Vuex 模块 


在 Vuex store 中 ,我 们 可 以 将 状态 划分 为 不 同 的 模块 ,以 便 更 好 地 管理 ,一 个 模块 由 一 个 state、 
getter、mutation 和 action 组 成 ， 跟 store 很 像 。store 和 其 中 的 每 一 个 模块 都 可 以 包含 任意 数量 的 
模块 , 因此 你 能 在 模块 中 骸 套 模块 一 一 如 何 组 织 出 最 有 利于 项 目的 store 模块 结构 需要 你 来 期 酌 。 


在 这 个 应 用 中 ， 我 们 将 创建 两 个 模块 : 


口 maps ， 用 来 关联 地 图 ; 
口 posts， 用 来 关联 博客 和 评论 。 


现在 ,我 们 专注 于 maps 模块 。 建 议 至 少 为 每 个 模块 创建 一 个 不 同 的 文件 或 目录 。 
(1) 在 store 文件 夹 中 新 建 一 个 mapsjs 文件 , 它 导出 一 个 默认 模块 定义 ,其 中 包含 地 图 的 state: 


export default { 
namespaced: true, 





























state () { 
return { 
center: { 
lat: 48.8538302, 
1ng:, 2..2982161.; 
和 
ZOOM: LTS» 
} 
sy 
} 


(2) 为 了 将 模块 添加 到 store 中 ， 将 它 添加 到 store/index.js 文件 的 新 modules 选项 中 : 


import maps from './maps' 





const store = new Vuex.Storelt{ 
人 
modules: { 
maps, 
5 
}) 


默认 情况 下 ， 模 块 中 getter、mutation 、action 的 状态 也 会 成 为 这 个 模块 的 状态 。 这 里 它 是 
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store.state.mapso 
@ 带 命名 空间 的 模块 


上 面 模块 中 的 namespaced 选项 告诉 Vuex 在 该 模块 的 所 有 getter、mutation 和 action 前 添加 
maps/ 命 名 空间 。 同 时 ， 还 会 在 这 个 模块 内 的 commit 和 dispatch 调用 中 添加 它们 。 


下 面 添加 几 个 getter， 它 们 将 在 BlogMap 组 件 中 用 到 : 


getters: { 
center: state => state.center., 
Zoom: state => state.zoom, 


}, 


maps/center 和 maps/zoom getter 会 被 添加 到 store 中 。 使 用 时 ， 可 以 这 么 写 : 
this.$store.getters['maps/center'] 
或 者 使 用 getter 辅助 函数 : 


mapGetters({ 
center: 'maps/center', 
Zoom: 'maps/zoom', 





}) 
也 可 以 指定 命名 空间 : 


.. .mapGetters('maps', | 
"Center '， 
ZOOM 

sy 

.. .mapGetters('some/nested/module', | 
A 

3 汉 





[=} 


最 后 一 种 方式 是 使 用 createNamespacedHelpers 方法 生成 基于 某 个 命名 空间 的 辅助 函数 : 









































import { createNamespacedHelpers } from vuex 
const { mapGetters } = createNamespacedHelpers ('maps') 


export default { 
computed: mapGetters([ 
‘Center', 
'Zoom', 
加 
} 


@ 访问 全 局 元 素 


你 可 以 在 命名 空间 模块 的 getter 中 访问 到 根 状 态 和 根 getter ( 即 所 有 的 getter )， 如 下 所 示 : 


someGetter: (state, getters, rootState, rootGetters) => { /* ... */ } 
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在 action 中 , 你 可 以 访问 到 上 下 文 的 rootGetters。 同时 , 还 可 以 在 commit 和 dispatch 
调用 中 使 用 { root : true } 选 项 ; 


myAction ({ dispatch, commit, getters, rootGetters }) { 
getters.a // store.getters['maps/a'] 
rootGetters.a // store.getters['a'] 
commit('someMutation') // 'maps/someMutation' 
commit('someMutation', null, { root: true }) // 'someMutation' 
dispatch('someAction') // 'maps/someAction' 
dispatch('someAction', null, { root: true }) // 'someAction' 


} 

2. BlogMap 模块 和 组 件 

这 一 小 节 里 ， 我 们 将 给 BlogMap 组 件 绑 定 上 maps 模块 。 
©e mutation 


首先 ， 在 maps 模块 中 添加 center 和 zoom mutation: 


mutatioins: { 
center (state, value) { 
state.center = value 
js 
Zoom (state, value) { 
state.zoom = Value 
] 汪 
3} 


© action 


Si 


然后 ,设置 提交 这 些 mutation 的 action: 


actions: { 
setCenter ({ commit }, value) { 
commit('center', value) 


和 
setZoom ({ commit }, value) { 
commit('zoom', value) 


}, 
}, 


@ 组 件 映 射 
回 到 BlogMap 组 件 ， 使 用 辅助 函数 映射 getter 和 action: 


import { createNamespacedHelpers } from 'vuex' 








const { 
mapGetters, 
mapActions, 
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} = createNamespacedHelpers('maps') 


export default { 
computed: { 
.. .ImapGetters ( [ 
"Center '， 
CE 


] ) ， 


mapOptions() { 
// 
站 
过 


methods: mapActions ( [ 
'setCenter', 
'setZoom', 
1 
上 


现在 我 们 可 以 通过 Vuex store 管理 地 图 的 状态 了 1! 





3. 用 户 位 置 
现在 ， 添 加 用 户 位 置 的 指示 符 。 我 们 可 以 通过 它 知道 用 户 的 位 置 ， 以 便 将 其 存储 到 store 中 。 
(1) 在 地 图 中 添加 googlemaps-user-position 组 件 : 




















<googlemaps-map 


> 
<!-- 用 户 位 置 --> 
<googlemap-user-position 
@update:position="setUserPosition" 
和 
</googlemaps-map> 


(2) 在 maps 模块 中 添加 userPosition 信息 : 





state () { 
return { 
// 


userPosition: null, 
} 
} 
getters: { 
// 
userPosition: state => state.userPosition, 
} 
mutations: { 
// 
userPosition (state, value) { 
state.userPosition = Value 
} 
} 


200 第 6 章 项 目 4: 博客 地 图 





actions: { 
A eis 
setUserPosition ({ commit }, value) { 
commit ('userPosition', value) 
Fs 
} 


(3) 然后 通过 合适 的 辅助 函数 将 setUserPosition action 映射 到 BlogMap 组 件 中 。 

现在 ， 你 应 该 可 以 在 store 中 获得 用 户 位 置 了 。( 前 提 是 你 已 经 同意 浏览 器 获取 你 的 位 置信 息 。) 
@ 以 用 户 为 中 心 

要 将 地 图 以 用 户 为 中 心 居中 放置 ， 用 户 位 置 非常 有 帮助 。 


(1) 在 maps 模块 中 新 建 centeronUser action : 























async centerOnUser ({ dispatch, getters }) { 
const position = getters.userPosition 
让 -SEE { 
dispatch('setCenter', position) 
} 
中 


有 了 这 个 ,我 们 可 以 对 setUserPositionaction 做 一 些 修改 一 一 在 首次 获取 用 户 位 置 时 ( 这 
时 它 还 是 nu11 )， 应 该 以 其 为 中 心 居中 放置 地 图 。 


(2) 修改 后 的 setUserPosition action 应 该 如 下 所 示 : 


setUserPosition ({ dispatch, commit, getters }, value) { 
const position = getters.userPosition 
commit ('userPosition', value) 
// 最 初 以 用 户 位 置 为 中 心 
if (!position) { 
dispatch('centerOonUser') 
} 
局 


现在 打开 应 用 试 一 试 ， 你 会 发 现 地 图 中 央 有 一 个 小 蓝 点 定位 到 了 你 的 当前 位 置 。 











默认 情况 下 ， 当 你 的 位 置 精确 度 超过 1000 米 时 ， 地 图 上 的 用 户 指 示 符 是 不 可 见 
人 的 。 所 以 ， 你 可 能 会 因为 硬件 的 缘故 看 不 到 它 。 这 时 可 以 在 googlemaps-user- 
position 组 件 中 传 入 一 个 更 大 的 minmumAccuracy 属性 值 来 解决 。 


(3) 在 工具 栏 中 还 有 一 个 'center on user' 按 钮 ， 所 以 需要 在 AppMenu 组 件 中 替换 


centeronUser action 的 映射 : 








methods: mapActions({ 
logout: "Togout™; 
centerOnUser: 'maps/centerOnUser', 


}) ， 
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6.3 博客 和 评论 


在 最 后 一 部 分 ， 我 们 将 在 应 用 中 添加 博客 内 容 。 每 篇 博客 都 有 一 个 位 置信 息 和 一 个 可 选 的 
Google 地 图 地 址 ID( 可 以 添加 对 地 址 的 描述 ， 比 如 Restaurant A )。 另 外 ， 我 们 还 会 加 载 地 图 可 
见 区 域内 的 所 有 博客 , 每 一 篇 博客 都 显示 为 一 个 带 自 定义 图 标的 标记 。 点 击 标 记 后 ， 右 侧 边 栏 会 
显示 该 博客 的 内 容 和 评论 列表 。 点 击 地 图 上 的 其 他 位 置 时 , 我 们 将 在 该 位 置 创建 一 篇 博客 草稿 并 
放 到 Vuex store 中 ， 同 时 在 右 侧 边栏 显示 一 个 可 编辑 草稿 内 容 并 保存 的 表单 。 





























6.3.1 在 store 中 添加 博客 模块 
首先 ， 新 建 一 个 命名 空间 为 posts 的 Vuex 模块 ， 用 以 管理 与 博客 相关 的 状态 数据 。 
(1) 新 建 一 个 包含 以 下 state 属性 的 store/postsjs 文件 : 


export default { 
namespaced: true, 











state () { 
return { 
// 博客 草稿 
draft: null, 
// 上 一 次 请 求 的 地 图 范围 
// 防止 重复 请 求 
mapBounds: null, 
// 当前 地 图 范围 内 的 博客 
posts: [], 
// 当前 选中 的 博客 ID 
selectedPostId: null, 
} 
} 
} 


(2) 下 面 添加 几 个 getter: 


getters: { 
draft: state => state.draft, 
posts: state => state.posts, 
// 博客 的 id 字段 为 '_id' (在 MongoDB 中 ) 
selectedPost: state => state.posts.find(p => p._id === 
state.selectedPost1Id), 
// 草稿 优先 于 当前 选中 的 博客 
CurrentPost: (state, getters) => state.draft || 
getters.selectedPost, 








}, 


(3) 再 添加 一 些 mutation ( 注意 ， 这 里 我 们 同时 修改 了 posts 和 mapBounds， 以 保证 数据 
一 致 ): 
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mutations: { 
addPost (state, value) { 
state.posts.push(value) 
a 


draft (state, value) { 
state.draft = value 
es 


posts (state, { posts, mapBounds }) { 
state.posts = posts 
state.mapBounds = mapBounds 

Fs 


selectedPostId (state, value) { 
state.selectedPost1Id = Value 
} 


updateDraft (state, value) { 
Object.assign(state.draft, value) 
下 
局 


(4) 最 后 将 它 添加 到 store 中 ， 如 同 之 前 的 maps 模块 一 样 : 
import posts from './posts' 
const store = new Vuex.Storelt{ 
六 人 
modules: { 
maps, 
posts, 


}, 
}) 


6.3.2” 泻 染 函数 和 JSX 


在 第 4 章 中 , 我 已 经 看 到 过 关于 演 染 函数 和 JSX 的 内 容 。 这 是 一 种 不 同 于 模板 的 组 件 视图 编 
写 方式 。 在 继续 后 面 的 内 容 之 前 ， 我 们 先 深 入 了 解 它 们 ， 然 后 将 其 应 用 于 实 丰 。 


1. 使 用 JavaScript 演 染 函数 编写 视图 


Vue 会 将 模板 编译 成 render 函数 。 也 就 是 说 ， 所 有 的 组 件 视 图 最 后 都 是 JavaScript 代码 。 
这 些 演 染 函数 将 构成 虚拟 DOM 树 的 元 素 ， 而 这 些 元 素 最 后 会 显示 在 真正 的 DOM 中 。 


大 多 数 情况 下 ， 使 用 模板 就 够 用 了 ， 但 是 你 也 可 能 遇 到 需要 使 用 JavaScript 完 整编 程 能 力 来 
编写 组 件 界面 的 情况 。 这 时 ， 可 以 在 组 件 中 使 用 render 函数 而 不 是 指定 一 个 模板 ， 例 如 : 


export default { 
props: ['message'], 
render (createElement) { 
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return createElement ( 
// 元 素 或 组 件 
'p', 
// 数据 对 象 
{ class: 'content' }, 
// 子 节点 或 文字 内 容 
this.message 
) 
} 
} 
第 一 个 参数 是 createElement ， 你 需要 调用 这 个 函数 来 创建 元 素 ( 可 以 是 DOM 元 素 或 者 
Vue 组件 )。 它 最 多 可 以 接收 3 个 参数 。 


口 element ( 必 选 ) 可 以 是 一 个 HTML 标签 、 一 个 已 注册 组 件 的 一 ， 或 者 是 一 个 定义 组 件 
的 对 象 。 它 可 以 是 一 个 返回 上 面 其 中 之 一 的 函数 。 

口 data (可 选 ) 是 一 个 数据 对 象 ， 用 来 指定 CSS 类 、prop 、 事 件 等 。 

口 chilgren (可 选 ) 可 以 是 一 个 文本 字符 串 或 一 个 由 createElement 构建 而 成 的 子 节点 
数组 。 



































将 h 作为 createElement 的 别名 是 一 个 通用 惯例 (我们 马上 会 看 到 这 实际 上 
”也 是 JSX 的 要 求 ),。 hh 来自 于 hyperscript， 表 示 “ 使 用 JavaScript 编写 HTML”。 


第 一 个 例子 将 实现 跟 以 下 模板 相同 的 功能 : 


<template> 
<p class="content">{{ message }}</p> 
</template> 


@ 动态 模板 


直接 写 演 染 函数 的 主要 优势 在 于 ， 它 更 接近 编译 器 ， 你 可 以 使 用 JavaScript 的 完整 能 力 来 操 
挖 模板 。 不 过 明显 的 缺点 就 是 ， 它 一 点 也 不 像 我 们 熟悉 的 HTML。 不 过 JSX 会 对 此 有 所 弥补 ， 
我 们 将 会 在 后 面 的 “JSX 是 什么 ”一 节 中 看 到 。 


例如 ， 你 可 以 创建 一 个 泻 染 任意 层级 标题 的 组 件 : 


Vue.component ('my-title', { 
props: ['level'] 
render (h) { 
return hl( 
// 标签 名 
‘ns{this.level}. 
// 默认 插 模 内 容 
this.$slots.default, 
) 
} 
} 
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6 这 里 省 略 了 可 选 的 data 参数 ， 只 传递 了 标签 名 和 内 容 。 


接 下 来 ， 我 们 可 以 使 用 它 在 模板 中 泻 染 一 个 <h2> 标 题 元 素 : 


<my-title level="2">Hello</my-title> 


与 之 等 价 的 模板 语法 则 十 分 元 长 : 














<template> 
<h1 v-if="level === 1"> 
<slot></slot> 
< HLS 
<h2 v-else-if="level === 2"> 
<slot></slot> 
</h23 
<h3 v-else-if="level === 3"> 
<slot></slot> 
</h3> 
<h4 v-else-if="level === 4"> 
<slot></slot> 
</h4> 
<h5 v=else=if="]level .===: 5 
<slot></slot> 
5 
<h6 v-else-if="level === 6"> 
<slot></slot> 
</h6> 
</template> 
@ 数据 对 象 

















第 二 个 可 选 参数 是 数据 对 象 , 它 可 以 传递 额外 的 元 素 信息 给 creat 


ElLement( 或 h)。 例如， 





你 可 以 使 用 与 传统 模板 中 v-bind:class 指令 相同 的 方式 指定 CSS 类 


下 面 是 一 个 数据 对 象 的 例子 ， 它 涵盖 了 大 部 分 的 特性 : 


{ 
// 和 v-bind:class 一 样 的 API 
'class': { 
foo: true, 
bar: false 
下 
// 和 Vv-bind:style 一 样 的 API 
style: { 
SOTO "Ee 
fontSize: '14px' 
I 
// 普通 的 HTML 属性 
attrs: { 
i “fo 








T 





， 或 者 添加 事件 监听 融 。 
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} 

// 组 件 prop 

props: { 
myProp: 'bar' 

} 

// DOM 属性 

domProps: { 
innerHTML: 'baz' 


// 事件 处 理 函 数 谈 套 在 "on" 下 面 ， 
// 但 是 不 支持 v-on:keyup .enter 这 样 的 修饰 符 
// 你 可 以 在 处 理 函 数 中 手动 检查 键 值 名 
on: { 
click: this.clickHandler 
} 
// 仅 组 件 可 用 
// 用 来 监听 原生 事件 ， 而 不 是 组 件 中 通过 vm.Semit 发 出 的 事件 
nativeon: { 
click: this.nativeClickHandler 
} 
// 自 定义 指令 
// 注意 不 要 设置 oldValue 字段 ， 因 为 Vue 会 自动 追踪 它 
directives: [ 
name: 'my-custom-directive', 
Value: '2' 
expression: '1 + 1', 
el 
modifiers: { 
bar: true 
} 
} 
3 
// 持 模 名 ,在 当前 组 件 是 另 一 组 件 的 组 件 时 使 用 
slot: 'name-of-slot' 
// 其 他 特殊 的 顶层 属性 
key: 'myKey', 
ref: 'myRef' 
} 


比如 ， 可 以 在 标题 级 别 小 于 某 个 特殊 值 时 添加 一 个 特殊 的 CSS 类 : 


Vue .component ('my-title', { 
props: ['level'] 
render (h) { 
return h( 
// 标签 名 
‘ns{this.level}. 
// 数据 对 象 
{ 
'class': { 
'important-title': this.level <= 3， 
} 





}, 
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// 默认 插 模 内 容 
this.$slots.default, 
) 
} 
}) 





也 可 以 添加 一 个 点 击 事件 的 监听 絮 ， 它 会 调用 组 件 中 的 方法 : 


Vue .component ('my-title', { 
props: ['level'], 
render (h) { 
return hl( 
// 标签 名 
‘hs{this.level}., 
// 数据 对 象 


on: { 


click: this.clickHandler., 


3 
je 
// 默认 插 模 内 容 

this.s$slots.default, 

) 

5 
methods: { 

clickHandler (event) { 

console.log('You clicked') 
ey 

}, 

}) 


关于 数据 对 象 的 详细 描述 ， 可 以 参考 官方 文档 ( https://cn.vuejs.org/v2/guide/render-function. 


html# 深 入 -data- 对 象 )。 











正如 我 们 所 看 到 的 ，Vue 在 模板 底层 使 用 了 纯 JavaScript 泻 染 函 数 来 构建 ! 我 们 甚至 可 以 编 
写 自 己 的 泻 染 函数 ， 使 用 createElement (或 h ) 函数 来 构建 需要 添加 到 虚拟 DOM 的 元 素 。 


这 种 编写 界面 的 方式 比 使 用 模板 更 加 灵活 和 强大 , 但 也 更 复杂 和 宛 长 。 在 你 觉得 合适 的 时 候 

















使 用 它 吧 ! 


e 虚拟 DOM 





render 困 数 返回 由 createElement (或 nh) 建立 的 一 个 节点 树 ， 这 些 节 点 在 Vue 中 称 为 


VNode。 这 棵 节点 树 代表 Vue 承载 的 虚拟 DOM 中 的 一 个 组 件 视 








个 节点 一 一 HTML 元 素 、 文 本 ,其 至 注释 也 是 方 点 。 


























图 。DOM 中 的 每 个 元 素 都 是 一 
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# 注 释 


我 的 标题 
# 文 本 














Vue 不 直接 将 虚拟 DOM 树 转化 为 实际 的 DOM 树 , 因为 这 样 可 能 引发 很 多 DOM 操作 (添加 
或 移 除 节点 ), 十 分 损耗 性 能 。 为 了 更 加 高 效 ，Vue 在 两 种 DOM 树 之 间 创 建 一 个 差异 表 ， 只 在 必 
要 时 才 会 通过 DOM 操作 将 虚拟 DOM 同步 到 实际 的 DOM。 




















2. JSX 是 什么 


创建 JSX 这 一 语言 是 为 了 在 rengder 函数 中 编写 更 类 似 于 HTML 形式 的 代码 。 它 实际 上 是 
一 种 很 像 XML 的 JavaScript 语法 扩展 。 使 用 JSX 写 上 一 个 例子 会 是 这 样 : 


export default { 
props: ['message'], 
render (h) { 
return <p class = "content"> 
{this.message} 
</p> 
} 
} 


是 Babel 让 这 一 切 成 为 可 能 。Babel 是 一 个 负责 将 ES2015 JavaScript ( 或 更 新 版 本 ) 代码 编译 
成 旧 ES5 JavaScript 代码 的 库 ， 而 ES5 JavaScript 可 以 运行 在 老 的 浏览 器 中 ， 比 如 I 焉 。Babel 也 可 
以 用 来 实现 JavaScript 语言 的 一 些 新 特性 〈( 比如 可 能 出 现在 未 来 版 本 里 的 草案 特性 ) 或 是 像 JSX 
这 样 全 新 的 语法 扩展 。 
















































































babel-preset-vue 中 包含 的 babel-plugin-transform-vue-jsx 搬 件 负 责 将 JSX 代 码 
转换 为 h 函数 中 使 用 的 真正 的 JavaScript 代码。 所 以 上 一 个 JSX 例子 将 被 转换 为 : 


export default { 
props: ['message'], 
render (h) { 
return h ('p', { class: 'content' }, this.message) 
} 
} 
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6 这 也 是 为 什么 我 们 要 在 JSX 中 用 hh 来 代替 createElement。 








幸好 ，vue-cli 已 经 帮 有 我 们 配置 好 了 ， 所 以 可 以 直接 在 .vue 文 件 中 编写 JSX 代码 ! 
3. 编写 博客 内 容 结构 〈 使 用 JSX! ) 


让 我 们 新 建 一 个 src/components/content 文件 夹 ， 并 在 其 中 创建 一 个 BlogContent.vue 文件 。 
这 个 组 件 代表 右 侧 边栏 ， 负 责 显示 右边 的 组 件 。 





























口 LocationInfo.vue 组 件 ， 当 地 图 上 有 地 点 被 选中 时 ， 显 示 该 地 点 的 地 址 和 名 字 。 
口 往 下 一 点 ,会 显示 以 下 三 个 组 件 中 的 一 个 : 








曙 NoContent .vue 组 件 ， 当 没有 任何 地 点 被 选中 时 ,会 显示 一 个 点 击 地 图 的 提示 ; 

和 CreatePost .vue 组 件 ， 当 有 一 篇 博客 草稿 时 ， 会 显示 一 个 表格 ; 

国 PostContent .VuUe 组 件 ， 当 一 篇 真正 的 博客 被 选中 时 ， 会 显示 博客 的 内 容 及 评论 
列表 。 


(1) 同样 在 content 目录 下 使 用 空 模板 创建 这 些 组 件 : 


<template></template> 











回 到 Blogcontent .vue 组 件 ! 我 们 将 在 这 个 新 组 件 中 实践 JSX。 
(2) 首先 创建 带 命名 空间 的 辅助 函数 : 


<script> 
import { createNamespacedHelpers } from 'vuex' 








// posts 模块 

const { 
mapGetters: postsGetters, 
mapActions: postsActions, 

} = createNamespacedHelpers('posts') 


</script> 


重 命名 带 命名 空间 的 辅助 函数 是 个 很 好 的 实践 ,因为 未 来 可 能 还 会 为 其 他 模块 添 
加 辅助 函数 。 举 个 例子 ， 如 果 不 这 么 做 ， 可 能 最 后 会 有 两 个 mapGetters， 而 这 

6 是 不 可 行 的 。 这 里 ， 我们 将 mapGetters 重 命名 为 bostsGetters， 同 时 将 
mapActions 重 命 名 为 postsActions。 


(3) 接着 ， 添 加 组 件 定 义 : 


export default { 
computed: { 
。.. PostSsGetters ( [ 
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“oratft 
'currentPpost', 
| 
cssClass () { 
return [ 


'blog-content', 
{ 


'has-content': this.currentPost， 








当 没 有 选中 的 博客 或 没有 编辑 中 的 草稿 时 ,将 使 用 has-content CSS 类 在 智能 手机 上 隐藏 
面板 ( 将 会 变 成 全 屏 )。 

(4) 下 一 步 ， 使 用 JSX 编写 泻 染 函 数 : 

render (hn) { 


Jet Content 
if (!this.currentPost) { 


Content = NoContent 

} else if (this.draft) { 
Content = CreatePost 

} else { 


Content = PostContent 


: 


return <div class = {this.cssClass}> 
<LocationInfo /> 
<Content /> 

</div> 


} 


63 别 忘 了 导入 另外 4 个 组 件 ! 


在 JSX 中, 标签 首 字母 大 小 写 很 重要 ! 如 果 是 小 写 , 编译 胡 会 认为 它 是 createElement 天 
数 的 一 个 字符 串 参数 ， 然 后 将 它 编译 为 一 个 HTML 元 素 或 已 注册 组 件 ( 比如 ，<qdiv> )。 反 之 ， 
如 果 首 字母 为 大 写 ， 编 译 器 则 会 认为 它 是 一 个 变量 ! 在 之 前 的 代码 中 ,直接 使 用 import 导入 


LocationIinfto， 例 如 : 
























































import LocationInfo from './LocationInfo.vue' 


export default { 
render (h) { 
return <LocationInfo/> 
} 
} 





210 第 6 章 项 目 4: 博客 地 图 








利用 这 个 特性 ,我 们 可 以 动态 地 选择 要 显示 的 组 件 。 这 得 益 于 Component 变量 (注意 Cc 是 
大 写 的 )。 如 果 变 量 的 首 字 母 是 小 写 则 该 特性 将 失效 。 





(5) 现在 同样 使 用 JSX 来 重 写 GeoBlog .vue 组 件 ， 同 时 添加 Blogcontent 组 件 : 


<script> 

import AppMenu from './AppMenu.vue' 

import BlogMap from './BlogMap.vue' 

import BlogContent from './content/BlogContent.vue' 


export default { 
render (h) { 
return <div class="geo-blog"> 
<AppMenu /> 
<div class="panes"> 
<BlogMap /> 
<BlogContent /> 
</div> 
</div> 
} 
} 


</script> 


《人 别 忘 了 移 除 文件 中 的 <Lemplates> 部 分 ! 不 能 胶 使 用 泻 染 函数 又 使 用 模板 。 


4. Nocontent 组 件 





在 继续 后 面 的 内 容 前 ， 让 我 们 快速 添加 NoContent .vue 组 件 的 模板 。 在 用 户 没 有 选中 博 
客 时 ， 它 将 只 显示 一 个 提示 : 


<template> 
<div class="no-content"> 
<i class="material-icons">explore</i> 


<div class="hint">Click on the map to add a post</div> 
</div> 


</template> 


6.3.3 创建 一 篇 博客 











当 用 户 点 击 地 图 上 没有 标记 的 地 点 时 , 我 们 会 为 其 创建 一 篇 博客 草稿 , 用 户 可 以 通过 右 侧面 
板 的 表单 编辑 博客 的 内 容 。 当 用 户 点 击 Create 按钮 时 , 我 们 将 草稿 发 送 到 服务 器 , 并 将 结果 (新 
博客 的 数据 ) 添加 到 博客 列表 中 。 





1. 添加 博客 草稿 action 








在 posts 命名 空间 模块 中 ， 我 们 需要 几 个 新 的 action 来 创建 、 更 新 和 清空 博客 草稿 。 
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添加 clearDraft、createDraft、setDraftLocation 和 updateDraft action : 


actions: { 
clearDraft ({ commit }) { 
commit ('draft', null) 
} 
createDraft ({ commit }) { 
// 默认 草稿 
commit('draft', { 
hth el = 
Gontents 
position: null, 
placeId: null, 
下 
} 


setDraftLocation ({ dispatch, getters }, { position, placelId }) { 
if (!getters.draft) { 
dispatch('createDraft') 
} 
dispatch('updateDraft', { 
position, 
placelIdgd, 
} 
} 


updateDraft ({ dispatch, commit, getters }, draft) { 
commit('updateDraft', draft) 
} 
} 





当 用 户 点 击 地 图 时 , 我 们 调用 setDraftLocation action。 在 没有 草稿 的 情况 下 ， 它 将 自动 
新 建 一 个 草稿 ， 同 时 更 新 草稿 的 地 点 信息 。 











2. 修改 BlogMap 
接 下 来 ， 需 要 修改 BlogMap 组 件 以 将 其 集成 到 Vuex store 中 。 6 


(1) 首先 , 在 BlogMap .vue 组 件 中 添加 posts 命名 空间 模块 的 Vuex 辅助 函数 , 别 忘 了 重 命 
名 之 前 在 maps 模块 中 定义 过 的 辅助 函数 : 


// Vuex 地 图 

// maps 模块 

const { 
mapGetters: mapsGetters, 
mapActions: mapsActions, 

} = createNamespacedHelpers('maps') 

// posts 模块 

const { 
mapGetters: postsGetters, 
mapActions: postActions, 

} = createNamespacedHelpers('posts') 
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(2) 添加 araft getter: 


computed: { 

.. .mapSsGetters ( [ 
"Cemter '， 
'Zoom', 

a 

.. .postsGetters(I[ 
varaftr 


(3) 再 添加 setDraftLocation action: 


methods: { 

.. .mapsActions([ 
'setCenter', 
'setUserPosition', 
"Set2oom ' ， 

] )， 


.. .postsActions([ 
'setDraftLocation', 


] ) ， 
} ， 


点 击 处 理 函 数 
我 们 同样 需要 添加 点 击 地 图 的 处 理 函 数 ， 月 








(1) 在 地 图 上 添加 click 处 理 函数 : 


<googlemaps-map 
: Center="center" 
: Zoom=" Zoom" 
: options="mapOptions" 
@update: center="setCenter" 
eupdate: zoom="setZoom" 
@click="onMapClick" 

A 


(2) 添加 分 发 setDraftLocation action 自 
latLng (位 置 ) 和 placeIg 信息 : 





onMapClick (event) { 
this.setDraftLocation({ 
position: event .LatLng， 
DlaceId: event .placeId， 
} 
中 


日 以 新 建 一 篇 博 客 。 





方法， 方法 中 使 用 的 是 Google 地 图 最 终 返 回 的 
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现在 试 着 点 击 地 图 ， 你 将 在 开发 者 工具 中 看 到 两 个 mutation ( 一 个 创建 草稿 ， 另 一 个 更 新 
地 点 )。 





Base State 


maps/center 


maps/userPosition 17:53:87 


posts/draft 








posts/updateDraft inspected active 17°53°98 








@ 幻影 标记 





我 们 想 要 在 草稿 所 在 的 位 置 显示 一 个 透明 标记 。 这 时 可 以 使 用 googlemaps-marker 组 件 。 


使 用 从 araft getter 中 获得 的 信息 在 googlemaps-map 组 件 中 添加 一 个 新 标记 : 
<!-- 新 博客 标记 --> 


<googlemaps-marker 
v=tf="draft" 
: Clickable="false" 
: label="{ 
color: 'white', 
fontFamily: 'Material Icons', 
text: 'adqd circle', 


"ODaCLTtY= 5" 
: position="draft .position" 
QE"6" 

/> 





9 如 果 没 有 在 地 图 上 看 到 新 标记 ， 请 刷新 页 面 。 


试 试点 击 地 图 ， 你 会 看 到 上 面 出 现 了 一 个 幻影 标记 。 





3. 博客 表单 
继续 编写 createPost .vue 组 件 ! 它 将 显示 一 个 表单 以 供用 户 填写 博客 的 具体 信息 ， 比 如 


214 第 6 章 项 目 4: 博客 地 图 








标题 和 内 容 。 
(1) 创建 一 个 带 有 简单 表单 的 模板 : 
<template> 
<form 


class="create-post" 
@submit.prevent="handleSubmit"> 
<input 

name="title" 

v-model="title" 

placeholder="Title" 

required /> 


<textarea 
name="content" 
v-model="content" 
placeholder="Content" 
required /> 


<div class="actions"> 
<button 
type="button" 
class="secondary" 
@click="clearDraft"> 
<i class="material-icons">delete</i> 
Discard 
</button> 
<button 
type="submit" 
:disabled="!formValid"> 
<i class="material-icons">save</i> 
Post 
</button> 
</div> 
</form> 
</template> 


(2) 然后 添加 posts 模块 的 Vuex 辅助 函数 : 


<script> 
import { createNamespacedHelpers } from 'vuex' 





// posts 模块 
const { 
mapGetters: postsGetters, 
mapActions: postsActions, 
} = createNamespacedHelpers('posts') 
</script> 


(3) 添加 必要 的 getter 和 方法 : 


export default { 
computed: { 
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...PostSGetters ( [ 
本 
> 
} 
methods: { 
..postsActions([ 
'clearDraft', 
'createPost'，// 我 们 很 快 就 将 创建 这 个 action 
'updateDraft', 
] 7 
} 











(4) 然后 ， 添 加 几 个 计算 属性 并 使 用 v-mogdel 指令 将 其 绑 定 到 表单 输入 框 ; 
title: { 
et) * 


return this.draft.title 
} 
set (value) { 
this.updateDraft ({ 
thle rett; 
title: value, 
} 
} 
} 
content: { 
get() { 
return this.draft.content 
} 
set (value) { 
this.updateDraft ({ 
“a Ee 
content: value, 
} 
} 
} 


formvalid() { 
return this.title && this.content 





} 


如 你 所 见 ， 可 以 用 这 个 对 象 表示 法 声明 使 用 计算 属性 的 两 种 模式 : getter 和 setter! 这 样 ,我 
们 不 仅 能 读 取 数据 ， 还 能 方便 地 修改 数据 。 


D get () 函数 的 调用 时 机 : 当 计算 属性 第 一 次 被 读 取 或 需要 重新 计算 时 。 
口 set (value) 函数 的 调用 时 机 : 当 计 算 属 性 被 赋值 时 ， 比 如 this.a = 'new Value'。 


这 在 使 用 Vuex 和 表单 时 非常 有 用 , 因为 可 以 让 我 们 用 Vuex 的 一 个 getter 作为 get 部 分 , 一 
个 action 作为 set 部 分 ! 


(5) 还 需要 一 个 nandleSubmit 方法 来 发 送 我 们 即将 创建 的 createPost action : 
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handleSubmit () { 
if (this.formvalid) { 
tnhis.createPost (this.draft) 
} 
} 5 


4. 实现 请 求 部 分 
现在 ,我们 将 实现 一 个 action 来 把 新 建 博客 的 请 求 发 送 到 服务 器 。 
(1) 首先 在 posts 模块 中 (不 要 忘 了 引入 sfetch ) 新 建 createPost action: 


async CreatePost ({ commit, dispatch }, draft) { 
const data = { 
snr 
// 我 们 需要 获取 表单 对 象 
position: draft.position.toJSON(), 
} 








// 发 送 请 求 
const result = await S$Sfetch('posts/new', { 
method: 'POST', 
body: JSON.stringify (data), 
} 
dispatch('clearDraft') 


// 更 新 博客 列表 
commit ('addPost', result) 
dispatch('selectPost', result._id) 


}, 


这 是 我 们 到 现在 为 止 遇 到 的 最 复杂 的 action! 它 会 准备 好 要 发 送 的 数据 ( 注意 我 们 是 如 何 将 
Google 地 图 的 position 对 象 序列 化 为 一 个 JSON 对 象 的 )。 然后， 发 送 一 个 PosT 请 求 到 服务 
器 的 /postnew 路 径 下 ， 取 回 新 增 的 实际 博客 对 象 ( 包含 _ia 字段 )。 最后， 清空 草稿 ， 将 新 博客 
添加 到 store 中 ， 同 时 将 其 设 为 选中 状态 。 


(2) 我 们 还 需要 创建 一 个 新 的 selectPost action， 这 样 新 建 的 博客 会 被 自动 选中 : 


async selectPost ({ commit }, id) { 
commit ('selectedPost1Id', id) 
// 获取 博客 详细 信息 (评论 等 ) 

和 


现在 你 可 以 点 击 地 图 创建 新 博客 了 ! 
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|ritle 





Content 


下 Discard 











6.3.4 获取 博客 列表 
在 本 节 中 ， 我 们 将 从 服务 器 获取 博客 列表 并 显示 到 地 图 上 。 





1. 添加 action 

用 户 平移 或 缩放 地 图 会 导致 地 图 区 域 发 生变 化 ， 每 当 此 时 都 要 重新 获取 博客 列表 。 

e 获取 博客 列表 的 action 

让 我 们 新 建 一 个 获取 博客 的 action， 但 首先 要 解决 一 个 问题 。 发 生 如 下 事件 如 何 处 理 : 


(1) 用 户 移 动 地 图 ; 

(2) 请 求 A 被 发 送 到 服务 器 ; 

(3) 用 户 再 次 移动 地 图 ; 

(4) 请 求 B 被 发 送 到 服务 器 ; 

(5) 由 于 某 些 原因 ， 我 们 在 接收 到 请 求 A 之 前 接收 到 了 请 求 B; 
(6) 我 们 设置 好 请 求 B 返回 的 博客 列表 ; 

(7) 请求 A 的 结果 被 接收 到 ; 

(8) 博客 列表 没有 显示 最 新 请 求 返回 的 数据 。 


这 就 是 为 什么 需要 在 新 请 求 发 送 时 终止 原来 的 请 求 。 为 了 做 到 这 一 点 , 我 们 将 在 每 个 请 求 中 
添加 唯一 标识 符 。 


(1) 在 posts.js 文件 的 顶部 声明 唯一 标识 符 : 


let fetchPostsUid = 0 
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(2) 现在 可 以 新 增 fetchPosts action 了 。 仅 当地 图 区 域 和 上 次 不 同时 ， 它 才 会 获取 地 图 区 
域内 的 博客 列表 ( 还 有 一 个 额外 的 force 参数 ): 


async fetchPost ({ commit, state }, { mapBounds, force }) { 
let oldBounds = state.mapBounds 
if (force || !oldBounds || !oldBounds.equals (mapBounds)) { 
const requestId = ++fetchPostsUid 


// 发 送 请 求 
const ne mapBounds .getNorthEast () 
const sw mapBounds .getSouthWest () 
const query = ‘posts ne=${ 
encodeURIComponent (ne.toUrlValue()) 
}&sw=${ 
encodeURIComponent (sw.toUrlValue()) 
}、 


const posts = await S$fetch(auery) 


// 当 检 测 到 发 送 了 另 一 个 查询 请 求 时 ,终止 这 里 的 操作 


if (requestId === fetchPostsUid) { 
commit('posts', { 
posts, 
mapBounds, 


外 ++fetchPostsUid 表达 式 先 对 fetchPostsUid 加 1， 然 后 返回 新 的 值 。 


0 我 们 将 地 图 区 域 编码 为 两 个 点 : 东北 角 和 西南 角 。 


我 们 通过 比较 待 发 送 请 求 的 唯一 ID (recuestId ) 和 当前 ID 计数 器 ( fetchPostsUida ) 
来 终止 查询 请 求 。 当 它们 不 相等 时 ,意味 着 已 经 有 男 一 个 请 求 被 发 送 了 ( 因为 计数 器 每 次 都 会 增 
加 )， 因 此 我 们 不 会 提交 查询 结果 。 














分 发 action 
让 我 们 在 maps store 中 添加 一 个 setBounds action， 它 将 在 用 户 平 移 或 缩放 地 图 时 被 分 发 。 
这 个 action 将 分 发 bosts 模块 中 的 fetchPosts。 
(1) 使 用 { root : true } 选 项 可 以 用 无 命名 空间 的 方式 来 分 发 action， 这 样 就 能 使 用 posts 
模块 了 : 


SetBounds ({ dispatch }, value) { 
dispatch('posts/fetchPosts', { 
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mapBounds: Value， 
元 
root: true, 
} 
} 


我 们 已 经 在 maps 模块 中 添加 过 一 个 action， 由 于 它 跟 地 图 有 关 ， 未 来 还 可 以 做 
更 多 事情 而 不 只 是 分 发 另 一 个 action。 


(2) 在 BlogMap.vue 组 件 中 ， 使 用 正确 的 辅助 函数 映射 setBounds action， 并 添加 一 个 ref 
属性 map 和 一 个 iale 事件 监听 需 到 地 网 上 


<googlemaps-map 
ref="map" 
:Center="center" 
vod Od 
:options="mapOptions" 
@update:center="setCenter" 
@update:zoom="setZoom" 
@click="onMapClick" 
@idle="onIdle" 

~ 


(3) 添加 对 应 的 onIdle 方法 来 分 发 setBounds action， 同 时 传递 地 图 区 域 : 








onIdle () { 
this.setBounds (this.srefs.map.getBounds()) 


}, 


刷新 应 用 ， 当 你 平移 或 缩放 地 图 时 ， 在 开发 者 工具 中 寻找 posts mutation。 


分 








2. 显示 标记 
依然 是 在 BlogMap 组 件 中 , 我们 将 再 次 使 用 googlemaps-marker 遍历 博客 列表 ， 并 显示 


4 


各 篇 博客 对 应 的 标记 。 首 先 ， 映 射 posts 和 currentPost getter 以 及 selectPost action 到 下 
确 的 辅助 函数 。 然 后 ， 在 googlemaps-map 组 件 内 添加 人 遍历: 














<googlemaps-marker 
Vv-for="post of posts" 
:key="post._id" 
:label="{ 
Color: post === currentPost ? 'white' : 'black', 
fontFamily: 'Material Icons', 
fontSize: 20pX'; 
text: 'face', 
过 
:position="post.position" 
indeXs"5" 
@click="selectPost (post._id)" 
/> 
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刷新 应 用 ,你 将 看 到 先前 添加 的 博客 出 现在 了 地 图 上 ! 另外 ， 当 你 点 击 某 个 标记 时 ， 其 图 标 
还 会 变 成 日 色 。 
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3. 登录 和 登 出 
我 们 还 没有 完成 获取 博客 的 全 部 功能 一 一 需要 对 用 户 的 登录 和 登 出 做 出 响应 : 


口 用 户 登 出 时 ,我 们 将 清空 博客 列表 和 最 后 一 次 记录 的 地 图 区 域 ， 以 便 重新 获取 博客 列表 ; 
口 用 户 登 录 时 ， 我 们 将 重新 获取 博客 列表 ， 然 后 再 次 选中 上 一 次 选中 的 博客 。 

















@ 登 出 
首先 实现 登 出 action。 


(1) 在 Vuex 的 posts 模块 中 添加 一 个 1ogout action， 用 来 清空 博客 列表 数据 : 





logout ({ commit }) { 


commit ('posts', { 
Dostey LL]; 
mapBounds: null, 
} 


] 
(2) 现在 可 以 在 主 store 中 ( store/index.js 文件 中 ) 调用 logout action: 


logout ({ commit, dispatch }) { 
commit('user', null) 
sfetch('logout') 
Vo 
dispatch('posts/logout') 

}, 


这 种 写法 是 可 行 的， 但 还 可 以 优化 一 一 我 们 可 以 将 posts 命名 空间 子 模块 的 logout action 
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定义 成 一 个 根 action。 这 样 ， 当 logout action 被 分 发 时 ，logout 和 posts/1logout 都 将 被 调用 ! 
(3) 在 post 模块 的 1ogout action 中 使 用 这 个 对 象 表示 法 : 


SgOout: + 
handle ({ commit }) { 
commit('posts', { 
Bostges (fl > 
mapBounds: null, 




















handler 属性 是 这 个 action 调用 的 函数 ， 而 root 布尔 属性 则 表明 这 是 不 是 一 个 根 action。 
现在 1ogout action 在 action 分 发 系统 中 将 不 再 有 命名 空间 ,会 在 分 发 一 个 无 命名 空间 的 1ogout 
action 时 被 调用 。 


只 有 logout action 自身 的 调用 不 再 有 命名 空间 ， 它 内 部 的 state 、getter、 提 交 和 
分 发 仍然 是 有 命名 空间 的 ! 


(4) 移 除 主 store 文件 中 1ogout action 的 这 行 代码 : qispatchn('posts/logout ')。 
@ 登录 

当 用 户 成 功 登 录 时 ， 我 们 将 分 发 一 个 无 命名 空间 的 logged-in action。 

(1) 回 到 posts 模块 ， 使 用 新 的 对 象 表示 法 添加 logged-in action: 


'lJogged-in': { 
handle ({ dispatch, state }) { 
if (state.mapBounds) { 
dispatch('fetchPosts', { 
mapBounds: state.mapBounds, 
force: true, 





} 

} 

if (state.selectedPost1d) { 
dispatch('selectPost', state.selectedPostId) 


(2) 当 用 户 成 功 授 权时 ， 在 主 store 文件 的 login action 中 分 发 这 个 新 的 logged-in action: 


if (user) { 
Wy 
dispatch('logged-in') 
} 
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6.3.5 ”选中 博客 


这 是 本 章 的 最 后 一 节 ( 除了“ 小结” 之 外 )! 我 们 将 创建 一 个 组 件 来 展示 博客 内 容 ， 包 括 博 
客 的 标题 、 内 容 、 位 置信 息 和 评论 列表 。 一 个 博客 详情 对 象 等 同 于 一 个 博客 对 象 加 上 作者 信息 、 
评论 列表 ， 以 及 每 条 评论 的 作者 信息 。 


1. 博客 详情 
为 了 展示 博客 详情 ， 我 们 先 修改 Vuex 的 posts 模块 。 
@ 博客 的 选中 和 发 送 


(1) 在 state 中 添加 selectedPostDetails 数据 属性 ， 并 添加 对 应 的 getter 和 mutation : 




















state () { 
return { 
A 


// 获取 选中 博客 的 详情 
selectedPostDetails: null, 
} 
A 


getters: { 
Wa aas 
selectedPostDetails: state => state.selectedPostDetails, 


}, 


mutations: { 
Pe se 
selectedPostDetails (state, value) { 
state.selectedPostDetails = value 
和 
二 


(2) 在 selectPost 中 ,发送 请 求 到 服务 器 的 /post/<id> 路 由 来 获取 博客 详情 : 


async selectPost ({ commit }, id) { 
commit('selectedPostDetails', null) 
commit ('selectedPost1Id', id) 
const details = await $fetch( ‘posts/${id}.) 
commit('selectedPostDetails', details) 


> 


(3) 创建 一 个 新 的 unselectPost action: 


unselectPost ({ commit }) { 
commit('selectedPostId', null) 

}; 

@ 博客 内 容 组 件 


当 用 户 点 击 地 图 上 的 标记 时 ， 需 要 在 侧 边栏 面板 中 展示 博客 内 容 。 为 此 , 我 们 用 一 个 专门 的 
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PostContent 组 件 来 实现 。 


(1) 首先 将 content /PostCcontent .vue 组 件 的 模板 初始 化 为 : 


<template> 
<div class="post-content"> 
<template v-if="details"> 
<div class="title"> 
<img :src="details.author.profile.photos[0] .value" /> 
<span> 
<span>{{ details.title }}</span> 
<span class="info"> 
<span class="name"> 
{{ details.author.profile.displayName }}</span> 


<span class="date">{{ details.date | date }}</span> 
</span> 


</span> 
</div> 
<div class="content">{{ details.content }}</div> 
<!-- TODO 评论 --> 
<div class="actions"> 
<button 
type="button" 
class="icon-button secondary" 
@click="unselectPost"> 
<i class="material-icons">close</i> 
</button> 
<!-- TODO 填写 评论 --> 
</div> 
</template> 
<div class="loading-animation" v-else> 
<div></div> 
</div> 
</div> 
</template> 
































首先 是 头 部 的 作者 头像 、 标 题 、 作 者 名 和 该 博客 的 创建 时 间 ， 然 后 是 博客 内 容 ,接着 是 评论 


列表 和 底部 的 工具 栏 。 在 服务 器 返回 请 求 的 数据 前 ， 还 将 显示 一 个 加 载 动画 。 





(2) 然后 需要 一 个 脚本 区 域 , 添加 posts 模块 中 的 details getter 和 unselectPost action: 


BCript> 





import { createNamespacedHelpers } from 'vuex' 


// posts 模块 

const { 
mapGetters: postsGetters, 
mapActions: postsActions, 

} = createNamespacedHelpers('posts') 


export default { 
computed: { 
.. .postsGetters(t{ 
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details: 'selectedPostDetails', 
om 
js 


methods: { 
..postsActions([ 
'unselectPost', 
|] 
} 


</script> 


现在 你 可 以 试 试 选中 一 个 标记 ， 观 察 右 侧 边栏 展示 的 博客 内 容 了 。 


My favorite restaurant 
Guillaume CHAU 09/10/2017 


This is the right place to eat! The 
service is very nice and the dishes are 
tasty and generous. 

You can have a full set menu (starter + 
main course + dessert + coffee or tea) 
for 28€ and you can choose almost 
anything on the entire menul 





x 











2. 位 置信 息 和 作用 域 插 村 


下 面 将 在 右 侧 边 栏 的 上 方 展示 当前 博客 的 位 置信 息 ， 包 括 名 字 和 具体 地 址 。 即 将 使 用 的 
vue-googlemaps 组 件 用 到 了 一 个 Vue 特性 : 作用 域 插 槽 。 


@ 利用 作用 域 插 楷 传 值 到 父 组 件 


你 应 该 已 经 了 解 插 槽 是 什么 了 , 它 让 我 们 可 以 将 元 素 或 组 件 置 于 其 他 组 件 中 。 通过 作用 域 插 
槽 ， 组 件 中 声明 的 <slot> 部 分 可 以 传 值 给 戏 入 插 槽 的 视图 。 


例如 ， 下 面 的 组 件 有 一 个 默认 插 槽 ， 以 及 一 个 结果 列表 results 属性 : 


<template> 
<div class="search"> 
<slot /> 
</div> 
</template> 






























































<script> 
export default { 
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computed: { 
results () { 
Bet ri A a 
} 
} 
} 


</script> 
我 们 可 以 这 样 通过 插 模 将 该 属性 传递 给 外 部 视图 : 
<slot :result="results" /> 


使 用 该 组 件 时 ， 可 以 在 代码 外 层 的 视图 模板 中 使 用 slot-scope 属性 获取 到 作用 域内 的 所 
有 数据 : 


<Search> 
<template slot-scope="props"> 
<div>{{props.result.length}} results</div> 
</template> 
</Search> 









































人 仅 有 一 个 子 组 件 时 ， 可 省 略 <template> 标 签 。 

















这 就 是 vue-googlemaps 库 的 组 件 从 Google 地 图 返回 数据 的 方式 ， 我 们 马上 就 会 用 到 它 。 
和 循环 结合 使 用 时 ， 作 用 域 插 槽 非常 有 用 : 

<slot v-for="r of results" :result="r" /> 

使 用 时 ， 插 槽 的 内 容 将 被 多 次 生成 并 传递 给 当前 的 元 素 : 


<Search> 
<div slot-scope="props" class="result">{{props.result.label}}</div> 
</Search> 


在 这 个 例子 中 ， 如 果 results 计算 属性 返回 了 3 条 数据 ， 我 们 将 有 3 个 <aiv> 分 别 显示 对 
应 的 结果 。 

@ 实现 组 件 

现在 我 们 将 使 用 这 个 新 的 作用 域 搬 覃 概念 来 展示 博客 位 置信 息 。 

(1) 在 components/content 目录 下 创建 一 个 名 叫 PlaceDetails .vue 的 组 件 ， 它 将 展示 某 个 
地 点 的 名 字 和 详细 地 址 : 

<script> 

export default { 


props: { 
name: String, 
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address: String, 

}; 

render (h) { 





return <div class="details"> 


<div class="name"><i class="material-icons">place</i> 
{this.name}</div> 


<div class="address"> {this.address}</div> 
</div> 
}, 
} 
</script> 


接 下 来 ,我 们 将 实现 LocationInfo.vue 组 件 。 





aps-geocoder 组 件 ， 它 将 找到 与 博客 位 置 相关 度 最 高 的 地 址 。 所 有 
的 数据 获取 都 在 作用 域 插 槽 中 完成 : 




















<template> 


(2) 首先 是 组 件 模 板 。 若 当前 博客 存储 有 placeId, 我 们 使 用 googlemaps-place-details 
组 件 ; 否则 使 用 google 


<div class="]loca 


tion-info" 
<!-- 详细 地 址 --> 





Vv-if="currentPost"> 
<googlemaps-place-details 
Vv-if="currentPost.placelId" 
:request="{ 
placelId: currentPost.placelId 
Ns 
<PlaceDetails 


slot-scope="props" 
Vv-if="props.results" 


:name="props.results.name" 


:address="props.results.formatted address" 
</googlemaps-place-details> 


/> 
<!-- 仅 地 点 --> 
<googlemaps-geocode 
v-else 


:request="{ 

location: currentPost.position, 
于 入 
<PlaceDetails 


slot-scope="props" 


Vv-if="props.results" 
:name="props.results[1] .placeDetails.name" 
:address="props.results[0] .formatted address" /> 
</googlemaps-geocoder> 
</div> 
<div v-else></div> 
</template> 
(3) 在 脚本 部 分 , 映射 posts 模块 的 currentPost getter, 同时 导入 刚才 创建 的 PlaceDetails 
组 件 : 
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<script> 
import PlaceDetails from './PlaceDetails.vue' 
import { createNamespacedHelpers } from 'vuex' 


// posts 模块 
const { 
mapGetters: postsGetters, 
} = createNamespacedHelpers('posts') 


export default { 
components: { 
PlaceDetails, 
} 


computed: postSsGetters ( [ 
'currentPost', 
]), 
} 


</script> 


现在 ， 当 选中 或 创建 一 篇 博客 时 ， 应 该 能 看 到 右 侧 边栏 展示 的 位 置信 息 了 。 








9 Restaurant 310 a table 
[Europe, 145 Boulevard de [Europe, 69310 Pierre- 


Benite, France 














3. 评论 一 “函数 式 组 件 

最 后 ， 我 们 将 实现 博客 组 件 ， 并 学 习 更 多 关于 速度 更 快 的 函数 式 组 件 的 内 容 。 

。 为 评论 修改 store 

在 介绍 函数 式 组 件 之 前 ， 我 们 需要 打 好 基础 。 

(1) 在 posts 模块 中 ， 新 增 一 个 给 博客 添加 评论 的 mutation 6 


addComment (state, { post, comment }) { 
post.comments.push (comment) 
} 


(2) 同样 新 增 sendcomment action， 用 来 发 送 查 询 请 求 到 服务 器 的 /posts/<id>/comment 
路 由 ， 并 将 结果 添加 到 选中 的 博客 中 : 


async sendComment ({ commit, rootGetters}, { post, comment }) { 
const user = rootGetters.user 
commit ('addComment', { 
post, 
comment: { 
.. .Comment, 
date: new Date(), 
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user_id: user._igd, 
author: user, 
J 
} 


await S$fetch( ‘posts/${post._id}/comment , { 
method: 'POST', 
body: JSON.stringify (comment), 


3 
}, 


6 由 于 命名 空间 模块 不 同 ， 这 里 使 用 全 局 的 rootGetters 来 获取 用 户 数据 。 


@ 函数 式 组件 

在 Vue 中 , 每 个 组 件 实例 在 创建 时 都 需要 做 一 些 设置 , 比如 数据 响应 系统 、 组 件 生命 周期 等 。 
函数 式 组 件 则 是 一 种 更 轻 量 的 选择 。 它 们 自身 没有 任何 状态 (无 法 使 用 this 关键 字 )， 也 不 会 在 
开发 者 工具 中 显示 ， 但 是 在 某 些 情况 下 有 非常 大 的 优势 一 一 速度 更 快 且 使 用 的 内 存 更 少 ! 




















由 于 可 能 需要 展示 非常 多 的 评论 ， 在 这 里 使 用 函数 式 组 件 是 非常 好 的 选择 。 
要 创建 一 个 函数 式 组 件 ， 需 要 在 组 件 定义 对 象 中 添加 functional: true 选项 : 


export default { 
functional: true, 
render (h, { props, children }) { 
return h(‘hs{props.level}., children) 
Ds 
} 


函数 式 组 件 是 无 状态 的 ， 而 且 不 能 使 用 thnis， 因 此 render 函数 获得 了 一 个 新 的 context 
上 下 文 参 数 , 包含 prop、 事 件 监听 器 、 子 内 容 、 插 槽 及 一 些 其 他 数据 。 完 整 信息 请 参考 官方 文档 
(https:/cn.vuejs.org/v2/guide/render-function.html# 国 数 式 组 件 )。 

















编写 函数 式 组 件 时 ， 声 明 prop 不 是 必需 的 。 虽 然 你 可 以 从 prop 中 获得 一 切 ， 但 
它们 同样 也 会 被 传递 给 context .data。 








你 还 可 以 使 用 模板 的 functional 属性 代 蔡 functional: true 选项 : 


<template functional> 
<div class="my-component">{{ props.message }}</div> 


</template> 


(1) 在 Postcontent .vue 旁边 新 建 Comment .vue 组 件 : 


<script> 
ImDort  { :date. } from Vi /filters. 
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export default { 
functional: true, 


render (h, { props }) { 
const { comment } = props 
return <div class="comment"> 
<img class="avatar" src= 
{comment .author.profile.photos[0] .value} /&gt; 
<div class="message"> 
<div class="info"> 
<span class="name">{comment .author.profile.displayName} 
</span> 
<span class="date">{date(comment .date)}</span> 
</div> 
<div class="content">{comment .content}</div> 
</div> 
</div> 
}, 
} 


</script> 


(2) 回 到 Postcontent 组 件 。 我 们 在 面板 中 间 添 加 评论 列表 ， 在 面板 底部 添加 评论 表单 : 


<div class="comments"> 
<Comment 
V-for=" (comment, index) of details.comments" 
:key="index" 
:comment="comment" /> 


</div> 

<div class="actions"> 
人 
<input 


v-model="commentContent" 
placeholder="Type a comment" 
@keyup.enter="submitComment" /> 
<button 
type="button" 
class="icon-button" 
@click="submitComment" 
:disabled="!commentFormValid"> 
<i class="material-icons">send</i> 
</button> 
</div> 











(3) 引入 comment 组 件 ， 添 加 commentContent 数据 属性 、commentFormValid 计算 属性 ， 
以 及 sendComment action 和 submitComment 方法 : 


import Comment from './Comment .vue' 


export default { 
components: { 
Comment, 


} 
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data() { 
return { 
commentContent: '', 
} 
} 
computed: { 
.. .postsGetters(t{ 
details: 'selectedPostDetails', 
sy 
commentFormVvalid() { 
return this.commentContent 





和 
J 
methods: { 

.. .postsActions([ 
"SendComment ' ， 
'unselectPost', 

1 

async submitComment () { 
if (this.commentFormValid) { 

this.sendComment ({ 
post: this.details, 
comment: { 

content: this.commentContent, 

}, 

} 
this.commentContent = "' 

} 
3 
D3 


现在 可 以 对 选中 的 博客 添加 评论 了 。 





兮 My favorite restaurant 
Guillaume CHAU 09/10/2017 

This is the right place to eat! The 
service is very nice and the dishes are 
tasty and generous. 

You can have a full set menu (starter + 
main course + dessert + coffee or tea) 
for 28€ and you can choose almost 
anything on the entire menu! 


Guillaume CHAU 09/10/2017 
Seems very nice! 


Guillaume CHAU 09/10/2017 
Would like to go someday 


x Type a comment | | 
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6.4 小 结 


本 章 介 绍 了 使 用 官方 Vuex 库 做 状态 管理 这 个 非常 重要 的 理念 。 它 将 有 助 于 我 们 搭建 更 复杂 
的 应 用 ， 同 时 大 幅 提高 应 用 的 可 维护 性 。 我 们 使 用 Google OAuth API 来 认证 用 户 ， 矢 入 Google 
地 图 ， 最 后 实现 了 一 个 完整 的 博客 地 图 应 用 。 所 有 这 些 都 离 不 开 Vuex， 它 让 我 们 的 组 件 更 简洁 ， 
代码 更 易于 扩展 。 


男 外 ， 如 果 你 想 扩 展 这 个 应 用 ， 可 以 参考 以 下 思路 : 


口 在 博客 标记 上 展示 点 赞 的 数量 ; 
口 允许 用 户 编辑 或 删除 评论 ; 
口 使 用 web-socket 实现 实时 更 新 。 


下 一 章 ， 我 们 将 学 习 更 多 与 服务 端 泻 染 、 国 际 化 、 测 试 和 部 署 相 关 的 内 容 。 
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本 章 ， 我 们 将 快速 创建 一 个 Fashion Store 应 用 ， 聚 焦 于 如 下 更 高 级 的 主题 : 

















口 提高 CSS 代码 与 PostCSS 和 autoprefixer 的 兼容 性 ; 
口 使 用 ESLint 来 检查 代码 ， 提 升 代 码 质量 和 风格 ; 

口 Vue 组 件 单元 测试 ; 

口 对 应 用 进行 本 地 化 ， 以 及 利用 Webpack 的 代码 拆 分 ( code splitting ) 功能 ; 
口 在 Nodejs 中 使 用 服务 端 演 染 ; 

口 为 生产 环境 构建 应 用 。 


这 是 一 个 简单 的 在 线 服 装 商店 应 用 ， 如 下 图 所 示 。 









































合 Shopping Cart 淡 
Green Socks ] 
$3,99 
Green Shirt 1 
$19,99 

上 Grey Shirt 
19.99 E39 1 
图 $6,99 
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7.1 高 级 开发 流程 
本 节 将 使 用 新 的 工具 和 包 来 改进 开发 流程 。 不 过 在 此 之 前 需要 先 设置 Fashion Store 项 目 。 
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7.1.1 项目 设 置 


(1) 参考 第 5 章 和 第 6 章 ， 使 用 vue init 命令 创建 新 项 目 : 


vue init webpack-simple e-shop 
cd e-shop 

npm install 

npm install -S babel-polyfill 





(2) 安装 Stylus: 


npm i -D stylus stylus-loader 


(3) 移 除 src 文件 夹 中 的 内 容 ， 然 后 下 载 源 代码 文件 ( 文件 夹 名 为 chapter7-download/src ) 并 
解压 到 src 文 件 夹 。 里 面 已 经 包含 了 应 用 所 需 的 所 有 源 代码 ， 可 以 帮 我 们 节省 时 间 。 


(4) 安装 其 他 几 个 依赖 包 : 


npm i -S axios vue-router vuex vuex-router-sync 








各 Axios 是 Vue.js 团队 推荐 的 一 个 优秀 的 库 ， 用 于 向 服务 器 发 送 请 求 。 


1. 生成 快速 开发 API 

前 面 已 经 创建 好 了 一 个 完整 的 Node 后 端 服务 器 ， 但 这 里 我 们 并 不 关注 应 用 的 功能 。 因 此 ， 
使 用 json-server 包 来 为 本 章 内 容 创建 一 个 非常 简单 的 本 地 API。 

(1) 安装 json-server 作为 开发 依赖 : 

npm i -D json-server 


(2) 运行 这 个 包 的 时 候 , 会 在 本 地 暴露 一 个 简单 的 REST API 并 使 用 db.json 文件 来 保存 数据 。 
可 将 db.json 文件 下 载 ( 参见 源 代码 文件 中 的 chapter7-download 文件 夹 ) 并 保存 到 项 目的 根 目录 。 
打开 这 个 文件 ， 会 看 到 一 些 商 品 信 息 和 评论 。 

(3) 然后 , 需要 添加 一 个 脚本 以 启动 JSON 服务 器 。 添加 一 个 新 的 gp 脚本 到 package.json 文件 : 

"db": "json-server --watch db.json" 

上 面 的 命令 会 运行 json-server 包 命 令 行 工 具 ， 并 侦 听 刚刚 下 载 的 dbjson 文件 内 容 的 变 
化 ， 这 样 就 能 轻松 地 编辑 了 。 可 以 通过 npm run 命令 来 尝试 一 下 : 


npm run db 









































默认 监听 3000 这 个 端口 ， 在 浏览 器 中 打开 REST 地 址 http://localhost:3000/items 就 可 以 访 
问 了 。 
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(€)=> G 个 © localhost:3000/items 
JSON Données brutes En-tétes 
Enregistrer Copier 
ois 下 
title: "Blue Socks" 
price: 2.99 
originalPrice: 3.99 
rating: 4.3 
img: "http://lorempixel.com/400/400/abstract/1/" 
ws 
id: 2 
title: "Green Socks" 
price: 3.99 
rating: 3.9 
img: "http://lorempixel.com/400/400/abstract/2/" 
2. 启动 应 用 


现在 可 以 启动 应 用 了 。 和 之 前 一 样 ， 打 开 一 个 新 的 终端 ， 运 行 npm run 命令 : 


npm run dev 


该 命令 会 用 正确 的 地 址 打开 一 个 新 的 浏览 器 窗口 。 这 个 应 用 已 经 可 以 使 用 了 。 


nets|alloloRS elrs 

















Shs Ee Green Socks 
轩 $3.99 ED 
$2,99 
| Red Socks ee 
i ,99 ED 
四 $3.99 $16,99 
Green Shirt Red Shirt 
51 9, 99 S19,99 
Sn Black Backpack 
65% 
国 本 
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7.1.2 使 用 PostCSS 为 CSS 自动 添加 前 组 


编写 CSS (或 Stylus ) 代码 时 ， 我 们 希望 能 兼容 大 部 分 浏览 器 。 幸 运 的 是 ， 有 工具 可 以 自动 
为 我 们 做 到 这 一 切 。 例 如 ， 添 加 浏览 器 引擎 前 级 ( vendor-prefixed ) 版 本 的 CSS 属性 (如 
-webkit-user-select 和 -moz-user-select ) 就 是 其 中 之 一 。 


PostCSS 是 一 个 专门 用 于 CSS 后 处 理 的 库 。 它 拥有 一 个 非常 模块 化 的 架构 ,通过 添加 插件 来 
使 用 各 种 方式 处 理 CSS。 


PostCSS 无 须 额外 安装 ，vue-loader 已 经 包含 了 它 ， 我 们 只 需要 按 需 安装 插件 即 可 。 在 本 
例 中 ， 需 要 用 到 autoprefixer 这 个 包 来 使 CSS 代码 兼容 更 多 浏览 器 。 
























































(1) 安装 autoprefixer 包 : 


npm i -D autoprefixer 


(2) 为 了 激活 PostCSS， 需 要 在 项 目 根 目 录 中 添加 一 个 名 为 postcss.config.js 的 配置 文件 。 通 
过 下 面 的 代码 告诉 PostCSS， 我 们 要 在 这 个 文件 中 使 用 autoprefixer: 


module.exports = { 
plugins: | 
require('autoprefixer'), 
i 
} 


完成 ! 这 样 autoprefixer 就 会 处 理 我 们 的 代码 了 。 举 个 例子 ， 请 看 下 面 这 段 Stylus 代码 : 


.Store-cart-item 
user-select none 


处 理 之 后 ， 最 终 的 CSS 如 下 所 示 : 


.Store-item[data-v-laf8c5dc] { 
-webkit-user-select: none; 
-moz-user-select: none; 














-ms-user-select: none; 
user-select: none; 


} 


UA Be 


通过 browserslist 指定 浏览 器 


我 们 可 以 通过 配置 prowserslist 来 指定 autoprefixer 的 目标 浏览 句 。 它 包含 一 系列 规 
则 来 确定 支持 哪些 浏览 需 。 打 开 package.json 文件 ， 查 看 browserslist 字段 。 里 面 应 该 有 
webpack-simple 模板 的 默认 值 ， 如 下 所 示 : 

1 


"last 2 versions", 
ot Te < 
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第 一 条 规则 指定 了 互联 网 上 使 用 份额 超过 1% 的 浏览 器 ， 第 二 条 规则 额外 选 定 每 个 浏览 器 的 
最 后 两 个 版 本 ， 最 后 一 条 规则 声明 不 支持 Internet Explorer 8 及 更 早 的 版 本 。 


规则 中 用 到 的 数据 来 自 https://caniuse.com/， 这 是 一 个 专门 提供 浏览 器 兼容 性 数 
据 的 网 站 。 








现在 可 以 通过 自 定 义 这 个 字段 来 指定 更 老 版 本 的 浏览 句 。 例 如 ， 要 指定 Firefox 20 及 之 后 的 
版 本 ， 只 需要 添加 下 面 这 条 规则 即 可 : 


"Firefox >= 20" 


更 多 关于 browserslist 的 信息 可 以 从 它 的 代码 仓库 ( https://github.com/ai/browserslist ) 中 
看 到 oo 











7.1.3 通过 ESLint 提升 代码 质量 和 风格 

与 其 他 开发 者 在 同一 项 目 进行 团队 协作 的 时 候 ， 和 良好 的 编码 习惯 和 代码 质量 是 非常 重要 的 。 
这 样 不 仅 能 避免 语法 错误 和 低级 错误 例如 忘记 声明 变量 )， 还 有 助 于 保持 源 代 码 的 整洁 性 和 一 
致 性 。 确 保 代 码 质量 的 这 个 过 程 称 为 代码 检查 lint )。 

ESLint 是 Vue.js 团队 推荐 的 lint 工具 之 一 。 它 提供 了 一 系列 可 以 开启 和 关闭 的 lnt 规 则 ， 用 
于 检查 代码 质量 。 还 可 以 通过 添加 插件 来 添加 更 多 规则 ， 有 些 包 则 定义 了 一 些 预 设 规则 。 


(1) 我 们 将 使 用 StandardJS 预 设 规则 以 及 eslint-plugin-vue 包 ， 这 添加 了 更 多 规则 ， 有 
助 于 遵循 Vue 官方 风格 指南 ( https://cn.vuejs.org/v2/style-guide/index.html ) : 
































npm i -D eslint eslint-config-standard eslint-plugin-vue@beta 


(2) 安装 eslint-config-standard 的 4 个 平 级 依赖 ( peer dependency ): 


npm i -D eslint-plugin-import eslint-plugin-node eslint-plugin- 
promise eslint-plugin-standard 


(3) 为 了 使 ESLint 解析 文件 时 支持 使 用 Babel 的 JavaScript 代码 ， 需 要 安装 一 个 额外 的 包 : 


npm i -D babel-eslint 





1. 配置 ESLint 
在 项 目的 根 目录 中 创建 一 个 .eslintrejs 文件 并 写 入 以 下 配置 : 


module.exports = { 
// 仅 使 用 本 配置 
root: true, 
// 文件 解析 器 


parser: 'vue-eslint-parser', 
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parserOptions: { 
// 对 JavaScript 使 用 babel-eslint 
'parser': 'babel-eslint', 
'ecmaVersion': 2017, 
// 使 用 import/export 语法 
'sourceType': 'module' 

} 

// 全 局 环境 对 象 

env: { 
browser: true, 
es6: true, 


https://github.com/feross/standard/blob/master/RULES.md#javascript-standard 
-style 
'standard', 
// https://github.com/vuejs/eslint-plugin-vue#bulb-rules 
'plugin:vue/recommended', 
由 > 
} 


首先 , 使 用 vue-eslint-parser 读 取 文件 (包含 .vue 文件 )。 它 在 解析 JavaScript 代码 时 
使 用 babel-eslint。 我 们 还 指定 了 JavaScript 的 EcmaScript 版 本 ， 并 使 用 ijmport /export 语 
法 来 引入 模块 。 


然后 ， 告 诉 ESLint 期 望 在 支持 ES6 (或 ES2015 ) 的 浏览 器 环境 中 运行 。 这 意味 着 我 们 应 该 
能 访问 全 局 变量 ， 如 window 或 Promise 对 象 ， 并 日 ESLint 不 会 引发 未 定义 变量 错误 。 


此 外 ， 我 们 还 指定 了 想 要 使 用 的 配置 (或 预 设 ): stangdard 和 vue/recommended。 





@ 自 定义 规则 


我 们 可 以 通过 rules 对 象 指定 启用 哪些 规则 并 修改 规则 选项 。 将 下 面 的 代码 添加 到 ESLint 
配置 中 : 


rules: { 
// https://github.com/babel/babel-eslint/issues/517 
no-use-before-define': 'off', 
'comma-dangle': ['error', 'always-multiline'], 


} 


第 一 行 禁用 了 no-use-before-define 规则 , 这 个 规则 在 使 用 . . .展开 运算 符 时 有 一 个 bug。 
人 规则 ， 强 制 在 所 有 数组 和 对 象 的 代码 行 结尾 处 添加 逗号 ( ，)。 








所 有 规则 都 有 一 个 状态 ， 其 值 可 以 是 off (或 0)、warn (或 1) 和 error (或 
2 ) 中 的 一 个 。 
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2. 运行 ESLint 
在 src 文件 夹 中 运行 ESLint 时 ， 需 要 在 package.json 中 添加 一 个 新 的 脚本 : 


"eslint": "eslint --ext .js,.jsx,.vue src" 


在 控制 台 会 看 到 如 下 所 示 的 错误 。 


一 些 问题 可 以 通过 在 前 面 的 eslint 命令 中 加 入 --fix 参数 自动 修复 : 


"eslint": "eslint --ext .js,.jsx,.vue src --fix" 


再 次 运行 ， 可 以 看 到 只 剩 下 一 个 错误 了 。 























/src/main,is 


Do not use 'new' for side effects no-new 




















ESLint 提示 应 该 在 创建 新 对 象 时 将 其 引用 保存 到 一 个 变量 中 。 再 看 一 下 对 应 的 代码 , 会 发 现 
我 们 确实 在 main.js 文件 中 创建 了 一 个 新 的 Vue 实例 : 


new Vuel(t{ 
el: '#app', 
router, 
store, 

. .App, 











)) 
查看 ESLint 错误 提示 ， 能 看 到 规则 的 代码 : no-new。 打 开 https://eslint.org/， 在 
0 搜索 框 输入 这 条 规则 就 能 得 到 规则 的 定义 。 如 果 这 是 一 条 由 插件 添加 的 规则 , 就 
会 带 上 插件 名 和 斜 杜 ， 例 如 vue/required-v-for-key。 
这 段 代码 是 刻意 这 么 写 的 ， 因 为 这 是 声明 Vue 应 用 的 标准 方式 。 因 此 , 需要 为 这 段 代码 禁用 
这 条 规则 ， 在 代码 前 面 加 上 一 条 特殊 的 注释 即 可 : 


// eslint-disable-next-line no-new 
new Vue ({ 









































a 
3. 在 Webpack 中 使 用 ESLint 
现在 ， 我 们 需要 通过 手动 运行 ESLint 脚本 来 检查 代码 。 如 果 可 以 通过 Webpack 来 执行 代码 
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检查 就 更 好 了 ， 这 样 检 查 操 作 将 会 完全 自动 化 。 幸 运 的 是 ，eslint-loader 使 其 变 成 了 可 能 。 


(1) 将 eslint-loader 和 friendly-errors-webpack-plugin 包 一 起 安装 到 开发 依赖 
中 ， 后 者 能 优化 控制 台 消 息 : 


npm i -D eslint-loader friendly-errors-webpack-plugin 


现在 需要 修改 Webpack 配置 文件 ， 添 加 一 条 新 的 ESLint 加 载 器 规则 。 











(2) 编辑 webpack.config.js 文件 ， 在 module .rules 选项 顶部 添加 新 的 规则 : 











module: { 
rules: [ 
{ 
test: /\.(jsx?|lvue)$/, 
loader: 'eslint-loader', 
enforce: 'pre', 
}, 
WY eas 











(3) 此 外 ,可 以 启用 friendly-errors-webpack-plugin 包 , 在 配置 文件 最 顶部 将 其 导入 : 


const FriendlyErrors = require('friendly-errors-webpack-plugin') 


ED 这 里 不 能 使 用 import/export 语法 ， 因 为 它 会 在 Node.js 中 执行 。 





上 








(4) 然后 ， 通 过 在 配置 文件 最 底部 添加 else 条 件 判 断 ， 在 开发 模式 中 添加 这 个 插件 : 


} else { 

module.exports.plugins = (module.exports.plugins || 
] ) aolreat (Cl 

new FriendlyErrors(), 

















) 
} 


重新 运行 dev 脚本 ,重启 Webpack, 并 在 代码 的 某 个 地 方 去 掉 一 个 逗号 。 应 该 可 以 在 Webpack 
输出 中 看 到 ESLint 错误 信息 。 








in ./src/main.ijs 


/Users/guillaumechau/Documents/Projets/packt-vue-proiject-guide/chapter7-full/src/main,.is 
PAs Missing trailing comma comma-dangle 
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你 将 在 浏览 器 中 看 到 受 加 的 错误 信息 。 





和 X 企 © localhost:8080 四 人 宇 中 国 


/Src/main,.ijs 


/Users/guiLLaumechau/Documents/Projets/packt-vue-project-=- 
guide/chapter7-fuLL/src/main. js 


Missing trailing comma 


@ multi (webpack)-dev-server/cLient?http://LocaLhost:8080 
webpack/hot/dev-server ./src/main.js 








如 果 将 逗号 重新 添加 回去 ， 钱 加 的 错误 信息 会 消失 ， 控 制 台 也 会 显示 一 条 友好 的 信息 。 





7.1.4 Jest 单元 测试 


我 们 需要 对 重要 的 代码 和 组 件 进 行 单元 测试 , 以 保证 它们 能 按照 预期 的 设计 工作 , 并 在 代码 
进化 的 过 程 中 阻止 大 部 分 退化 。 针 对 Vue 组 件 , 首选 的 测试 工具 是 Facebook 的 Jest。 它 带 有 一 个 
缓存 系统 ， 运 行 速 度 快 ， 而 且 有 一 个 很 好 用 的 快照 功能 ， 可 以 帮助 我 们 检测 退化 乃至 更 多 问题 。 

(1) 首先 ， 安 装 Jest 以 及 官方 的 Vue 单元 测试 工具 : 

npm i -D jest vue-test-utils 

(2) 还 需要 安装 一 些 与 Vue 相关 的 实用 工具 ， 以 便 使 用 jest-vue 来 编译 .vue 文件 ， 并 创建 
组 件 快照 : 


npm i -D vue-jest jest-serializer-vue vue-server-renderer 









































要 在 Node 中 获取 组 件 的 HTML 演 染 ,推荐 方式 是 使 用 vue-server-renderer 
包 进 行 服务 器 泻 染 。 这 一 点 将 在 本 章 稍 后 讲 到 。 


(3) 最 后 ， 需 要 安装 一 些 Babel 包 来 支持 Babel 编译 ， 并 在 Jest 内 动态 导 人 Webpack。 





npm i -D babel-jest babel-plugin-dynamic-import-node 
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1. 配置 Jest 
在 项 目 根 日 录 中 创建 一 个 新 的 jest.config.js 文件 来 配置 Jest: 
module.exports = { 
transform: { 
'.+\\.jsx?$': '<rootDir>/node modules/babel-jest', 
'.+\\.vue$': '<rootDir>/node modules/vue-jest', 


} 
snapshotSerializers: | 
'<rootDir>/node modules/jest-serializer-vue', 


] ， 


mapCoverage: true, 


} 


transform 选项 定义 了 JavaScript 文件 和 Vue 文件 的 处 理 器 。 然 后 ， 需 要 告诉 Jest 使 用 
jest-serializer-vue 序列 化 组 件 快照 。 此 外 , 我 们 还 将 通过 mapcoverage 选项 启用 源 代码 


映射 。 
更 多 的 配置 选项 可 以 在 Jest 网 站 ( https://facebook.github.io/jest/ ) 上 查看 。 




















@ 为 Jest 配置 Babel 
为 了 支持 JavaScript import /export 模块 以 及 Jest 中 的 动态 导入 ， 需 要 在 运行 测试 任务 时 
修改 Babel 配 置 。 





0 使 用 Jest 时 ， 我 们 不 会 使 用 Webpack 以 及 用 于 构建 真实 应 用 的 加 载 器 。 


当 NODE_ENV 环境 变量 设置 为 test 时 ， 需 要 在 配置 文件 中 添加 两 个 Babel 插件 : 


人 








{ 
"presets": [ 
["env", { "modules": false }], 
"stage-3" 
Us 
"env": { 
"test": { 

"plugins": [ 
"transform-es2015-modules-commonjs", 
"dynamic-import-node" 

] 

} 
} 
} 





transform-es2015-modules-commonjs 插件 使 Jest 支持 import/export 语法 ，dynamic- 
import-node 则 使 其 支持 动态 导入 。 
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6 运行 时 ，Jest 会 自动 将 NODE_ENV 环境 变量 设置 为 test。 


2. 第 一 个 单元 测试 


为 了 使 所 有 地 方 都 默认 支持 Jest， 需 要 调用 测试 文件 .testjs 或 者 .spec.js。 我 们 将 测试 
BaseButton.vue 组 件 。 在 src/components 文件 夹 中 创建 一 个 新 的 BaseButton.spec.js 文件 。 


(]) 首先 ， 从 vue-test-utils 中 导 和 组件 以 及 shallow 方法 : 


import BaseButton from './BaseButton.vue' 
import { shallow } from 'vue-test-utils' 


(2) 然后 ， 通 过 descripe 陈 数 创建 测试 套件 : 


describe('BaseButton', () => { 
// 测试 
}) 


(3) 在 测试 套件 内 ， 通 过 test 函数 添加 第 一 个 单元 测试 : 


describe('BaseButton', () => { 
test('click event', () => { 
// 测试 代码 
} 
}) 





(4) 我 们 要 测试 点 击 这 个 组 件 时 是 否 会 触发 click 事件 。 需 要 在 组 件 外 创建 一 个 包装 对 象 ， 
它 将 提供 用 于 测试 这 个 组 件 的 函数 : 


const wrapper = shallow (BaseButton) 


(5) 接着 ,模拟 对 组 件 的 点 击 : 


wrapper.trigger('click') 


(6) 最 后 ， 使 用 Jest 的 expect 方法 检测 是 否 触发 了 click 事件 : 


expect (wrapper.emitted() .click) .toBeTruthy () 




















(7) 现在 ， 在 package.json 文件 中 添加 一 个 用 于 运行 Jest 的 脚本 : 


"jest": "jest" 


(8) 然后 ， 像 往常 一 样 使 用 npm run 命令 : 


npm run jest 


测试 任务 启动 了 ， 并 且 会 显示 如 下 输出 。 
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PASS src/components/BaseButton.spec.js 
BaseButton 
click event (13ms) 


Test Suites: 1 passed, 1 total 
Tests: 1 passed, 1 total 
Snapshots: 0 total 

Time: 1.809s 

Ran all test suites. 








想 要 学 习 更 多 关于 Vue 组 件 单元 测试 的 内 容 ， 可 以 访问 官方 指南 : https://vue-test-utils. 


vuejs.org/zh/。 
3. ESLint 和 Jest 全 局 变量 


如 果 现 在 运行 ESLint， 我 们 将 会 看 到 与 describe、test 和 expect 等 Jest 关键 字 相 关 的 
错误 提示 。 











'describe' is not defined no-undef 


'test' is not defined no-undef 





我 们 需要 对 ESLint 配置 文件 做 一 点 小 小 的 改动 


// 全 局 环境 对 象 
env: { 
browser: true, 
es6: true, 
jest: true, 


}, 


现在 ，ESLint 能 识别 Jest 关键 字 ， 不 会 再 出 现 错误 提示 了 。 


指定 jest 环境 。 修 改 .eslintrc,js 文件 : 








4. Jest 快照 


Jest 快照 是 在 每 次 运行 测试 时 保存 并 比较 的 字符 串 ， 可 以 检测 潜在 的 退化 。 它 们 通常 用 于 保 
存 组 件 的 HTML 泻 染 ， 也 可 以 用 来 保存 其 他 任意 值 ， 前 提 是 在 测试 过 程 中 存储 和 比较 这 个 值 是 
有 意义 的 。 

对 于 Vue 组件 ， 我们 将 通过 名 为 vue-server-renderer 的 服务 端 泻 染 工具 保存 HTML 泻 
染 快照 。 我 们 将 会 用 到 这 个 包 中 的 createRenderer 方法 : 

import { createRenderer } from 'vue-server-renderer' 

在 测试 启动 时 ， 将 会 实例 化 一 个 演 染 器 实例 ， 然 后 通过 shallow 函数 包装 组 件 并 开始 将 其 
泻 染 到 一 个 字符 串 中 。 最 后 ， 将 结果 与 之 前 浑 染 的 结果 进行 比较 。 下 面 是 一 个 对 BaseButton 
组 件 进行 快照 测试 的 例子 ， 传 人 了 一 些 prop 值 以 及 默认 插 醒 内 容 : 


test('snapshot', () => { 
const renderer = createRenderer () 
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const wrapper = shallow(BaseButton, { 
// prop 值 
propsData: { 
GE 
disabled: true, 
badge: '3', 
和 
// 插 模 内 容 
slots: { 
default: '<span>Add Item</span>', 
Fs 
} 


renderer.renderToString (wrapper.vm, (err, str) => { 
if (err) throw new Error (err) 
expect (str) .toMatchSsnapshot () 
}) 
}) 
如 果 是 第 一 次 运行 快照 测试 ， 它 会 创建 快照 并 将 其 保存 到 旁边 一 个 名 为 ”snapshots 
人 的 文件 夹 中 。 如 果 你 使 用 了 版 本 控制 系统 (如 git )， 则 需要 将 这 些 快照 文件 添加 


@ 更 新 快照 


一 旦 修改 了 一 个 组 件 ， 其 HTML 泻 染 也 可 能 会 改变 。 这 意味 着 它 的 快照 将 会 失效 ，Jest 测试 
也 会 失败 。 幸运 的 是 ， jest 命令 有 一 个 广 --updateSnapbshots 参数 。 当 使 用 这 文 个 参 数 时 ， 所 有 


失效 的 快照 都 会 被 重新 保存 ， 测 试 也 会 通过 
(1) 在 package.json 文件 中 加 入 一 个 新 的 脚本 : 


"jest:update": "jest --updateSnapshot" 

















加) 举 个 例子 ， 通 过 改变 一 个 CSS 类 来 修改 BaseButton 组 件 。 如 果 再 次 运行 Jest 测 试 ， 会 
显示 一 个 | 错误 ， 提示 快照 不 再 匹配 。 











FAIL src/components/BaseButton.spec.js 
BaseButton 

click event (21ms) 

icon prop (14ms) 

snapshot (20ms) 


expect( ) .toMatchSnapshot() 


does not match 








(3) 现在 ， 通 过 新 的 脚本 更 新 快照 : 


npm run jest:update 
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一 次 ， 所 有 测试 都 将 通过 ，BaseButton 的 快照 也 会 更 新 。 


@ 


.EAR 
BaseButton 

click event (14ms) 

icon prop (10ms) 


snapshot (13ms) 


>» 1 snapshot updated 
Snapshot Summary 
> 1 snapshot updated in 1 test suite. 





你 应 该 只 在 确认 没有 其 他 退化 时 运行 该 命令 。 最 好 是 像 之 前 一 样 正常 运行 测试 ， 
确保 只 有 修改 过 的 组 件 按 预想 那样 保存 快照 失效 ,更 新 快照 后 , 再 使 用 普通 的 测 
试 命令 Yo 


7.2 补充 话题 
本 节 将 额外 讨论 几 个 适用 于 更 大 型 应 用 的 主题 。 











7.2.1 国际 化 和 代码 拆 分 




















如 果 应 用 面向 不 同 国家 的 用 户 ， 就 需要 进行 翻译 , 使 其 更 加 人 性 化 、 更 有 吸引 力 。 对 应 用 的 
文本 进行 本 地 化 时 ， 推 荐 使 用 vue-i1i8n 包 : 


npm -i -S vue-il8n 











使 用 vue-il8n 时 , 我 们 将 在 应 用 的 AppFooter 组 件 中 次 加 一 个 链 慷 ， 前 往 供用 户 选 择 语 




















言 的 新 页 面 。 只 翻译 这 个 链接 和 新 页 面 即 可 , 但 是 如 果 你 愿意 ,也 可 以 对 应 用 的 其 他 部 分 进行 翻 











译 。vue-il8n 的 工作 原理 是 ,创建 一 个 带 有 翻译 后 消息 的 i18n 对 象 并 将 其 注入 Vue 应 用 中 。 











(1) 在 src/plugins.js 文件 中 ， 将 新 插件 安装 到 Vue 中 : 


import VueI18n from 'vue-il8n' 


A 


Vue.use (VueIl 8n) 


(2) 在 项 目 目录 中 新 建 一 个 名 为 i18n 的 文件 夹 。 下 载 包 含 翻译 文件 的 locales 文件 夹 (位 于 











chapter7-download 文件 夹 中 ) 并 放 在 其 中 。 例 如 ，il8n/locales/en.js 文件 中 包含 有 英文 翻译 。 
(3) 新 建 一 个 index.js 文件 ， 里 面 导出 了 应 用 支持 的 语言 列表 : 


export default | 





"en', 
'fr' 
上 ’ 
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'es', 
'de', 
] 


我 们 需要 用 到 如 下 两 个 新 的 工具 函数 。 
口 createI18n: 用 于 创建 i18n 对 象 ， 带 有 一 个 locale 参数 。 
口 getAutoLang: 返回 用 户 在 浏览 右 中 设置 的 两 个 字符 长 的 语言 代码 ， 比 如 en 或 者 fr。 
大 多 数 情况 下 ， 这 和 操作 系统 的 语言 设置 一 致 。 
(在 src/utils 文件 夹 中 ， 新 建 一 个 i18n.js 文件 ， 并 在 里 面 导 入 vueI18n 和 前 面 定 义 的 语言 
列表 : 


import VueIl8n from 'vue-il8n' 
import langs from '../../il8n' 
































(5) 在 编写 本 书 时 ， 还 需要 bapbel-preset-stage-2 (或 更 低 )， 以 便 Babel 能 解析 动态 导 
入 。 在 package.js 文件 中 ,修改 babel-preset-stage-3 包 : 


"babel-preset-stage-2": "^6.24.1", 


(6) 运行 npm install 更 新 包 。 
(7) 编辑 根 目 录 下 的 .babelrc 文件 ,将 stage-3 改 成 stage-2。 
(8) 为 了 能 切换 到 stage-2， 需 要 进行 下 面 的 安装 : 


npm install --save-dev babel-preset-stage-2 


1. 动态 导入 的 代码 拆 分 


创建 118n 对 象 时 , 我 们 希望 只 载 作 locale 参数 指定 的 翻译 语言 。 为 此 , 需要 通过 import 
函数 对 文件 进行 动态 导入 。 它 需要 将 路 径 作为 接收 参数 并 返回 一 个 Promise， 这 个 Promise 会 在 
从 服务 絮 加 载 完 毕 后 最 终 确定 对 应 的 JavaScript 模块 。 


在 Webpack 中 ,动态 导 入 功能 有 了 时候 被 称 为 “代码 拆 分 ”"， 因 为 Webpack 会 将 异步 模块 移 到 
另 一 个 经 过 编译 的 JavaScript 文件 中 ， 该 文件 称 为 块 (chunk )。 


下 面 是 一 个 通过 动态 导入 加 载 异步 模块 的 例子 : 


async function loadAsyncModule () { 
await module = await import('./path/to/module') 
console.log('default export', module.default) 
console.log('named export', module.myExportedFunction) 


} 
你 可 以 使 用 被 导入 路 径 下 的 变量 ,前 提 是 里 面包 含 一 些 会 告诉 Webpack 从 哪里 能 找到 这 些 文 
件 的 信息 。 举 个 例子 ， 下 面 的 代码 无 法 正常 运行 : 


import (myModulePath) 
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但 是 ， 下 面 这 段 代码 可 以 正常 运行 ,前提 是 变量 路 径 不 包含 . . /: 
import ('./data/${myFileName} .json\') 


本 例 中 ，data 文件 夹 中 所 有 带 json 扩展 名 的 文件 都 会 被 添加 到 构建 的 异步 块 中 ， 
因为 Webpack 无 法 猜测 运行 时 需要 用 到 哪些 文件 。 


通过 动态 导入 异步 加 载 较 大 的 JavaScript 模块 可 以 减少 打开 页 面 时 发 送 给 浏览 器 的 初始 
JavaScript 代码 。 在 我 们 的 应 用 中 ， 它 只 需要 加 载 相关 的 翻译 文件 ， 而 不 是 在 初始 的 JavaScript 
文件 中 包含 全 部 翻译 文件 。 


如 果 已 经 在 主 代 码 (初始 块 ) 中 使 用 常规 的 import 导入 了 一 个 模块 ， 那么 它 就 
9 被 加 载 了 ,不 会 再 次 被 拆 分 到 另 0 本 例 无 法 享受 代码 拆 0 而 且 


初始 的 文件 大 小 也 不 会 减 小 。 注 意 ， 你 可 以 在 动态 加 载 的 模块 中 通过 常规 的 
import 关键 字 异 步 使 用 其 他 模块 : 它们 会 被 放 到 同一 个 块 中 ww 含 到 
初始 块 中 的 话 )。 














i18n 对 象 是 由 vue-i18n 包 内 的 vueI18n 构造 函数 创建 的 。 我 们 将 传人 locale 参数 。 
createI18n 国 数 应 该 是 这 样 的 : 


export async function createI18n (locale) { 
const { default: localeMessages } = await 
import(.../../il8n/locales/${locale}.) 
const messages = { 
[locale]: localeMessages, 


} 





const il8n = new VueI18n (1{ 
locale, 
messages, 


}) 


return il8n 


} 


kt 如 上 所 示 ， 因 为 使 用 了 export default 导出 信息 ， 所 以 需要 先 获取 模块 的 default 
值 。 


可 以 使 用 Promise 代替 async/await 来 实现 上 面 的 代码 : 


export function createI18n (locale) { 
return import(.../../il8n/locales/${locale}.) 
.then(module => { 
const localeMessages = module.default 
A 
} 
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2. 自动 加 载 用 户 区 域 设置 


接 下 来 ,我们 可 以 通过 navigator.1language (或 者 兼容 Internet Explorer 的 userLanguage ) 
来 获取 区 域 代 码 , 然后 , 检查 区 域 代 码 是 否 在 langs 的 语言 列表 内 ,如 果 不 在 就 使 用 默认 的 en。 














(1) getAutoLang 图 数 应 该 如 下 所 示 : 


export function getAutoLang () { 
let result = window.navigator.userLanguage || 
window.navigator.language 
if (result) { 
result = result.substr(0, 2) 


} 


if (langs.indexOof (result) === -1) { 
return 'en' 
} else { 


return result 
让 
} 


人 有 些 浏览 器 返回 的 可 能 是 en_Us 这 种 格式 ， 但 我 们 只 需要 取 前 两 个 字母 。 





(2) 在 sre/main.js 文件 内 ， 导 人 如 下 两 个 新 的 工具 函数 ; 


import { createIl8n, getAutoLang } from './utils/il8n' 
(3) 然后 ， 修 改 main 困 数 : 


口 通过 getAutoLang 获取 首选 区 域 设置 ; 
口 使 用 createI18n 也 数 创 建 并 等 待 返回 118n 对 象 ; 
口 将 i18n 对 象 注入 Vue 的 根 实例 中 。 


修改 后 的 函数 如 下 所 示 : 


async function main () { 
const locale = getAutoLang() 
const il8n = await createIl8n(locale) 
await store.dispatch('init') 











// eslint-disable-next-line no-new 
new Vue ({ 

el: '#app', 

router, 

store, 

il8n，// 将 il8n 注入 应 用 

es 
} 
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人 不 要 忘 了 在 createI18n 前 面 加 上 await 关键 字 ， 和 否则 返回 的 将 是 Promise。 


现在 , 可 以 打开 浏览 器 开发 者 工具 的 Network 面板 并 刷新 页 面 。Webpack 会 在 单独 的 请 求 中 
加 载 与 区 域 设置 对 应 的 翻译 模块 。 在 下 面 的 截图 中 ，2.build.js 就 是 这 个 异步 加 载 的 文件 。 








国 200 GET locale @ iocalho.… 了 加 docu... html 
®@ 200 GET build.js @ localho... script js 
®@ 200 GET 2.build.js 园 iocalho.… 四 script js 








3. 更 改 语言 页 面 
到 目前 为 止 ， 应 用 并 没有 什么 实质 变化 ， 接 下 来 添加 一 个 允许 用 户 选 择 语言 的 页 面 。 





(1) 在 src/routerjs 文件 中 导入 PageLocale 组 件 : 





import PageLocale from './components/PageLocale.vue' 


(2) 接着 在 routes 数组 的 最 后 一 个 路 由 ( 路 径 为 * 的 那 一 个 ) 前 面 加 入 locale 路 由 : 


{ path: '/locale', name: 'locale', component: PageLocale }, 


(3) 在 AppFooter.vue 组 件 中 ,将 这 个 路 由 链接 加 入 模板 : 


<div v-if="$route.name !== 'locale'"> 
<router-link :to="{ name: 'locale' }">{{ S$t('change-lang') }} 
</router-link> 

</div> 


从 上 面 的 代码 可 以 看 出 ,我 们 使 用 了 vue-ii8n 组 件 提 供 的 st 来 显示 翻译 后 的 文本 。 参 数 
则 对 应 区 域 设 置 文件 中 的 键 。 现 在 应 该 可 以 在 应 用 的 页 脚 中 看 到 这 个 链接 了 。 








Vue.js =a" 1 名 
Changer de langue 

















es 





这 个 链接 会 带 我 们 前 往 语言 选择 页 面 ， 而 该 页 面 已 经 由 vue-il8n 完全 翻译 好 了 。 








Changer de langue 


Retour 
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可 以 在 components/PageLocale.vue 文件 中 查看 它 的 源 代码 。 


当 点 击 茶 个 区 域 设 置 按钮 时 ， 就 会 加 载 对 应 的 翻译 〈 如果 尚未 加 载 的 话 )。 在 浏览 锅 开 发 者 
工具 的 Network 面板 ， 每 次 都 会 看 到 其 他 块 的 请 求 。 














G200 GET 1.build.js localho... ED script js 
@ 200 GET 3.build.js localho... script js 
@ 200 GET 4.build.js localho. eH script js 





服务 端 泻 染 〈server-side rendering，SSR) 是 指 在 发 送 应 用 的 HTML 到 浏览 器 之 前 ， 先 在 
服务 器 上 运行 和 演 染 应 用 。 这 样 做 主要 有 两 大 好 处 。 


口 更 好 的 搜索 引擎 优化 〈search engine optimization，SEO) ， 因 为 应 用 的 初始 内 容 会 在 页 
面 的 HTML 中 进行 泻 染 。 这 一 点 很 重要 ， 因 为 没有 搜索 引擎 会 索引 一 个 异步 JavaScript 
应 用 (例如 ， 当 有 一 个 下 拉 框 时 )。 

口 在 网 络 或 设备 比较 慢 的 情况 下 能 更 快 地 显示 内 容 ， 因 为 泻 染 后 的 HTML 不 需要 通过 
JavaScript 显示 给 用 户 。 

日 是 ， 使 用 SSR 也 有 一 些 缺 点 。 

口 代码 必须 可 以 在 服务 器 上 运行 〈 除 非 是 在 仅 客户 端 使 用 的 钧 子 里 ， 如 mounteqd )。 同 时 ， 

有 些 库 对 浏览 右 的 兼容 性 可 能 不 是 特别 好 ， 需 要 进行 特殊 处 理 。 

口 由 于 服务 需 将 完成 更 多 的 工作 ， 其 负荷 将 加 大 。 

口 开发 环境 设置 更 为 复杂 。 

因此 ,使 用 SSR 并 不 总 是 个 好 主意 ， 尤 其 是 在 第 一 次 显示 内 容 的 时 间 不 是 很 重要 的 情况 下 

( 如 管理 员 控 制 面板 )。 

1. 通用 应 用 的 结构 
为 了 编写 在 客户 端 和 服务 端 都 能 运行 的 通用 应 用 (universal app )， 需 要 调整 源 代码 的 架构 。 
当 应 用 在 客户 端 运行 时 , 页面 每 次 加 载 都 处 于 一 个 全 新 的 上 下 文中 。 这 就 是 我 们 到 目前 为 止 

对 根 实例 、 路 由 器 和 store 都 使 用 单 例 实例 的 原因 。 现 在 需要 在 服务 器 上 也 拥有 一 个 全 新 的 上 下 

文 , 但 问题 是 Node.js 是 有 状态 的 。 解决 方案 就 是 在 服务 器 处 理 每 个 请 求 时 都 创建 全 新 的 根 实例 、 

路 由 器 和 store。 


(1) 先 从 路 由 器 开始 。 在 src/routerjs 文件 中 ， 将 创建 路 由 器 的 方法 包装 到 一 个 新 导出 的 


CreateRounter 函数 中 : 
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export function createRouter () { 

const router = new VueRouter({ 
roOULSeS: 
mode: 'history', 
scrollBehavior (to, from, savedPosition) { 

2 

} 

} 


return router 


} 


(2) 对 Vuex store 做 相同 的 处 理 。 在 scr/store/index.js 文件 中 ， 将 代码 包装 到 一 个 新 导出 的 
createStore 国 数 中 : 





export function createStore () { 
const store = new Vuex.Store (1{ 
strict: process.env.NODE_ENV !== 'production', 


LA 


modules: { 
cart, 
item, 
items, 
Qi; 
} 
} 


return store 


} 


(3) 同时 ,将 src/main.js 重 命 名 为 src/app.js。 这 将 是 我 们 创建 路 由 器 、store 和 Vue 根 实例 的 
通用 文件 。 将 main 函数 改 成 一 个 导出 的 createapp 函数 , 它 会 接收 一 个 context 参数 并 返回 
应 用 、 路 由 器 和 store: 


export async function createApp (context) { 
const router = createRouter() 
const store = createStore() 





sync (store, router) 


const il8n = await createIl8n (context.1locale) 
await store.dispatch('init') 


const app = new Vuelt{ 
router, 
store, 
il8n, 
.. .App, 
} 
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return { 
app, 
router, 
store, 
} 
} 


6 不 要 忘 了 修改 createRouter 和 createStore 的 导入 。 


在 服务 端 ， 我 们 不 能 像 在 客户 端 那样 选择 初始 的 区 域 设 置 ， 因 为 服务 器 无 法 访问 window. 
navigator。 这 就 是 需要 将 区 域 设 置 传人 context 中 的 原因 。 


const il8n = await createI18n(context .LIocale) 


我 们 还 从 根 实例 定义 中 移 除 了 el 选项 ， 因 为 它 在 服务 器 上 没有 任何 意义 。 





























@ 客户 端 入 口 
在 浏览 器 中 ， 代 码 将 从 我 们 接 下 来 要 编写 的 客户 端 人 口 文件 开始 。 


(1) 新 建 一 个 src/entry-clientjs 文件 ， 作 为 客户 端 bundle 的 入 口 点 。 它 将 获取 用 户 语言 , 调用 
createApp 畏 数 ， 然 后 将 应 用 挂 载 到 页 面 


import { createApp } from './app' 
import { getAutoLang } from './utils/il8n' 


























const locale = getAutoLang () 
createApp({ 
locale, 
}) .then(({ app }) => { 
app. $mount ('#app') 
把 


(2) 现在 可 以 修改 webpack.config.js 文件 中 的 和 人口 路 径 了 : 


entry: './src/entry-client.js', 
可 以 重新 启动 dev 脚本 ,检查 应 用 是 否 还 能 在 浏览 器 中 正常 运行 。 
@ 服务 器 入 口 


新 建 一 个 src/entry-serverjs 文件 作为 服务 器 bundle 的 入 口 。 它 会 导出 一 个 函数 ， 而 该 函数 将 
从 稍 后 构建 的 HTTP 服务 器 接收 一 个 context 对 象 。 在 一 切 准 备 就 绪 之 后 , 它 会 返回 一 个 Promise 
并 通过 Vue 应 用 进行 解析 。 

如 下 所 示 ， 向 context 对 象 传人 一 个 url 属性 ， 这 样 就 能 设置 当前 路 由 了 : 


router .push(context .url) 
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和 客户 端 入 口 类 似 ， 使 用 createaApp 函数 创建 根 应 用 实例 、 路 由 器 和 store。entry-serverjs 
应 该 类 似 下 面 这 样 : 
import { createApp } from './app' 


export default context => { 
return new Promise(async (resolve, reject) => { 
const { app, router, store } = await createApp (context) 
// 设置 当前 路 由 
router.push(context .url) 
// TODO 获取 与 预 加 载 数据 匹配 的 组 件 
// TODO resolve (app) 
} 
} 


i 这 里 返回 一 个 Promise 是 因为 我 们 会 在 完成 所 有 操作 后 向 应 用 传 入 app。 














app 根 实例 将 会 通过 resolve (app) 发 回 给 一 个 称 为 演 染 器 的 东西 (有 点 类 似 于 我 们 在 Jest 
快照 中 用 到 的 )。 首 先 ， 我 们 要 处 理 Vuex store 预 加 载 。 

2. 状态 管理 

在 处 理 请 求 时 ， 需 要 在 演 染 应 用 之 前 从 相关 的 组 件 中 获取 数据 ， 这 样 才 能 在 浏览 器 加 载 
HTML 时 显示 数据 。 例 如 ，PageHome .vue 会 获取 商品 条 日， 而 PageStoreItem.vue 则 会 检 
索 商 品 信息 和 评论 。 

我 们 将 添加 一 个 新 的 asyncData 自 定 义 选 项 到 这 两 个 组 件 中 , 这 样 在 进行 SSR 时 就 能 在 服 
务 需 中 调用 它 。 

(1) 编辑 PageHome.vue 组 件 ， 加 入 下 面 这 个 函数 。 该 函数 会 分 发 item store 模块 的 


fetchIitems action: 


























asyncData ({ store }) { 
return store.dispatch('items/fetchItems') 


pm 
(2) 在 PageStoreItem.vue 组 件 中 ， 需 要 通过 服务 器 发 送 的 路 由 ia 参数 调用 item store 


模块 的 fetchstoreItemDetails action: 





asyncData ({ store, route }) { 
return store.dispatch('item/fetchStoreItemDetails', { 
id: route.params.id, 
lj 
} 




















(3) 组 件 已 经 准备 好 了 ， 回 到 entry-server.js。 可 以 通过 router.getMatchedComponents () 





254 第 7 章 项 目 5: 在 线 商店 以 及 扩展 





方法 获取 与 当前 路 由 匹配 的 组 件 列表 : 


export default context => { 
return new Promise(async (resolve, reject) => { 
const { app, router, store } = await createApp (context) 
router.push (context .url) 
// 等 待 组 件 解决 方案 
router.onReady(() => { 
const matchedComponents = 
// TODO 预 加 载 数据 
// TODO resolve (app) 
}, reject) 


router.getMatchedComponents() 


: 
} 


(4) 然后 ， 我 们 可 以 调用 这 些 组 件 的 所 有 asyncData 选项 并 等 待 调用 完成 。 将 store 和 当前 


路 由 都 传递 给 它们 ， 待 完成 之 后 ， 通 过 context .state = 
发 回 给 演 染 器 。 使 用 Promise.all(array) 等 待 所 有 的 asyncData 调用 : 





router.onReady (() => { 


const matchedComponents = router.getMatchedComponents() 


Promise.all(matchedComponents.map(Component => { 
if (Component .asyncData) { 
return Component .asyncDatal({ 
store, 
route: router.currentRoute, 
}) 
} 
})).then(() => { 
// 发 回 store 的 state 
Context .State = store.state 


// 将 应 用 发 送 给 澄 染 器 
resolve (app) 
}) .catch (reject) 
}, reject) 


如 果 发 生 了 错误 ， 它 会 拒绝 返回 给 泻 染 需 的 Promise。 


@ 在 客户 端 还 原 Vuex state 





store.state 将 Vuex store 的 state 


store 的 state 会 在 服务 端 被 HTML 页 面 上 一 个 名 为 ”INITIAL_STATE ”的 变量 序列 化 。 利 





用 这 一 点 ， 我 们 甚至 可 以 在 应 用 挂 载 前 设置 state， 以 便 组 件 访问 。 
编辑 entry-clientjs 文件 ， 在 挂 载 应 用 前 调用 store .replaceState 方法 : 




















CreateaApp ({ 
locale, 
}) .then(({ app, store }) => { 
if (window. INITIAL STATE ) { 
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Store.replaceState(window. _INITIAL STATE ) 
} 





app. Smount ('#app') 
}) 


现在 ，store 就 会 有 服务 器 发 送 的 数据 了 。 
3. Webpack 配置 
现在 我 们 已 经 准备 好 应 用 代码 了 。 在 继续 后 面 的 操作 之 前 ， 还 需要 重 构 Webpack 配置 。 


客户 端 和 服务 器 需要 的 Webpack 配置 稍 有 不 同 。 共用 一 个 配置 文件 , 然后 为 客户 端 和 服务 器 
进行 扩展 是 个 不 错 的 想法 。webpack-merge 包 可 以 帮助 我 们 轻松 地 实现 这 个 想法 ， 它 会 将 多 个 
Webpack 配置 合并 为 一 个 。 


对 于 服务 器 配置 ， 我 们 还 需要 安装 webpack-node-externals 包 以 防止 Webpack 将 
node_mogdules 下 的 包 打 包 进 bundle 一 一 我 们 并 不 需要 这 么 做 ， 因 为 应 用 是 在 Nodejjs 而 非 浏览 
器 中 运行 。 所 有 相应 的 导入 都 会 作为 require 声明 被 保留 ， 这 样 Node 就 会 自己 加 载 它们 。 

(1) 在 开发 依赖 中 安装 包 : 


npm i -D webpack-merge webpack-node-externals 
































(2) 在 项 目 根 目录 中 新 建 一 个 webpack 文件 夹 ,然后 移动 webpack.config.js 文件 到 该 文件 夹 中 

并 重 命 名 为 common.js。 需 要 进行 一 些 修改 。 
(G3) 从 配置 文件 中 移 除 entry 选项 。 这 会 在 特定 的 扩展 配置 中 指定 。 
(4) 将 output 选项 更 新 为 正确 的 文件 夹 并 生成 更 合适 的 块 名称 : 





output: { 
path: path.resolve(_ _ dirname, '../dist'), 
publicPpath: '/dist/', 
filename: ' [name]. [chunkhash] .js' 

} 

@ 客户 端 配置 





在 webpack/common.js 旁边 新 建 一 个 client.js 文件 ， 用 来 扩展 基础 配置 : 


const Webpack = require('webpack') 

const merge = require('webpack-merge') 

const common = require('./common') 

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') 


module.exports = merge(common, { 
entry: './src/entry-client', 
plugins: | 
new webpack.optimize.CommonsChunkPlugin(t{ 
name: 'manifest', 
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minChunks: Infinity, 
a 
// 生成 客户 端 构建 清单 文件 
new VueSSRClientPlugin(), 
]， 
}) 


VueSSRClientPlugin 将 会 生成 一 个 vue-ssr-client-manifest.json 文件 传 给 演 染 器 。 这 样 , 它 


就 能 知道 更 多 客户 端的 信息 。 同 时 ， 它 还 会 将 脚本 标签 和 关键 CSS 自动 注入 HTML 中 。 





ee 会 站 楼 入 和 于 砍 而 基 TME， 


关键 CSS 是 服 
器 就 不 用 等 待 CSS 加 载 完 成 ， 而 是 可 以 更 快 地 泻 染 组 件 。 


这 样 浏览 


CommonsChunkPlugin 会 将 Webpack 运 运行 时 代码 放 入 一 个 块 中 ， 这 样 随 后 就 能 马上 注入 异 
步 块 。 它 还 能 提升 应 用 和 供应 商 代码 的 缓存 性 能 。 


@ 服务 器 配置 





在 webpack/commonjs 旁边 新 建 一 个 serverjs 文件 ， 用 来 扩展 基础 配置 ; 


const merge = require('webpack-merge') 

const common = require('./common') 

const nodeExternals = require('webpack-node-externals') 

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') 





module.exports = merge(common, { 
entry: './src/entry-server', 
target: 'node', 
devtool: 'source-map', 
output: { 
libraryTarget: 'common]js2 ' ， 
}， 
// 对 node_modules 跳 过 Webpack 处 理 
externals: nodeExternals({ 
// 从 no_modules 中 强行 引入 CSS 文件 
// 等 待 Webpack 处 理 
whitelist: /\.css$/, 
Fos 
plugins: [ 
// 生成 服务 器 bundle 文件 
new VueSSRServerPlugin(), 
]3 
}) 


这 里 修改 了 多 处 设置 ， 如 target 和 output.1ibraryTarget， 以 适应 Node.js 环境 








我 们 使 用 webpack-node-externals 包 告诉 Webpack 忽略 node_modules 文件 夹 中 的 模块 
(也 就 是 依赖 ), 由 于 我 们 处 于 Nodejs 环境 而 非 浏 览 器 中 , 因此 无 须 将 所 有 依赖 打包 到 一 个 bundle 
中 ， 从 而 节约 了 构建 时 间 。 
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最 后 , 使 用 VuessRServerPlugin 生成 演 染 器 要 用 到 的 服务 器 bundle 文件 。 它 包含 了 编译 
过 的 服务 端 代码 和 大 量 其 他 信息 ， 这 样 演 染 器 就 可 以 支持 源 代码 映射 (将 aevtool 设置 为 
source-map )、 热 重 载 、 关 键 CSS 注入 以 及 与 客户 端 构建 清单 数据 连同 的 其 他 注入 。 

4. 服务 端 设置 

在 开发 过 程 中 ,我 们 无 法 在 使 用 SSR 的 情况 下 直接 使 用 webpack-aev-server， 而 是 要 通 
过 Webpack 设置 express 服务 器 。 下 载 server.dev.js 文件 (位 于 chapter7-download 文件 夹 中 ) 并 放 


入 项 目 根 目录 中 。 这 个 文件 导出 了 一 个 名 为 setupDevServer 的 函数 ， 用 于 运行 Webpack 并 更 
新 服务 侣 。 


我 们 还 需要 一 些 包 来 设置 开发 环境 : 


npm i -D memory-fs chokidar webpack-dev-middleware webpack-hot-middleware 


可 以 通过 memory-fs 来 创建 虚拟 文件 系统 ,通过 chokiqar 来 侦 听 文件 ， 再 通过 最 后 两 个 
中 间 件 在 express 服务 器 中 支持 Webpack 模块 热 蔡 换 。 


@ 页 面 模板 


在 index.html 旁边 新 建 一 个 index.template.html 文件 ， 并 复制 其 内 容 。 然 后 将 其 主体 内 容 替 
换 成 一 个 特殊 的 <!--vue-ssr-outlet--> 注 释 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Fashion Store</title> 
</head> 
<body> 
<!--vue-ssr-outlet--> 
</body> 
</html> 


这 个 特殊 的 注释 会 被 服务 器 中 泻 染 后 的 标记 蔡 换 。 






























































5. express 服务 器 


对 于 Nodejs， 我 们 将 使 用 express 包 来 创建 HTTP 服务 器 。 此 外 ， 我 们 还 需要 reify 包 
以 便 能 在 Node.js 内 部 使 用 import /export 语法 ( Node.js 原生 不 支持 )。 
(1) 安装 新 的 包 : 


npm i -S express reify 


(2) 下 载 这 个 不 完整 的 server.js 文件 (位 于 chapter7-download 文件 夹 中 ) 并 将 其 放 入 项 目 根 
目录 。 该 文件 内 已 经 创建 了 一 个 express 服务 器 并 配置 了 必要 的 路 由 。 
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目前 ， 我 们 将 集中 在 开发 上 面 。 
@ 创建 并 更 新 泻 染 器 
为 了 泻 染 我 们 的 应 用 , 需要 一 个 由 Vue-server-render r 包 的 createBundleRenderer 
隙 数 创 建 的 演 染 器。 
bundle 泻 染 器 和 普通 泻 染 器 有 很 大 的 差别 。 前 者 使 用 一 个 服务 器 bundle 文件 
i (得 盖 于 新 的 Webpack 配置 ， 它 会 自动 生成 ) 以 及 一 个 可 选 的 客户 端 构建 清单 








( 它 能 让 泻 染 器 知道 更 多 的 代码 信息 )。 这 样 一 来 ,就 能 拥有 更 多 的 特性 ， 如 源 代 
码 映射 和 热 重 载 。 
在 server.js 文件 中 ,使 用 下 面 的 代码 替换 // TODO development 注释 : 


const setupDevServer = require('./server.dev') 
readyPromise = setupDevServer({ 
server, 
templatePath, 
onUpdate: (bundle, options) => { 
// 重新 创建 bundle 洽 染 器 
renderer = createBundleRenderer (bundle, { 
runInNewContext: false, 
ODtLONS:; 








所 
}, 
}) 


有 了 serverdevjs 文件 ， 就 能 给 express 服务 器 添加 对 热 重 载 功 能 的 支持 了 。 我 们 还 指定 了 
HTML 页 面 模板 的 路 径 ， 以 便 在 页 面 改变 时 重新 加 载 它 。 


设置 好 更 新 触发 条 件 后 ， 我 们 将 创建 或 重新 创建 bandle 浑 染 器 。 





@ 泻 染 Vue 应 用 
接 下 来 将 实现 泻 染 应 用 的 代码 ， 并 将 HTML 结果 发 回 给 客户 端 。 
将 // Topo renger 注释 替换 成 下 面 的 代码 : 


const context = { 
url: reqgq.url, 
// 浏览 器 发 送 的 语言 列表 
locale: regq.acceptsLanguages (langs) 
} 
renderer.renderToString (context, (err, html) => { 
if (err) { 
// 演 染 错误 页 面 或 重 定向 
res.status(500) .send('500 | Internal Server Error') 
console.error(“error during render : S${req.url}.) 
console.error (err.stack) 





Ten 
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} 
res.send(html]l) 
}) 


多 亏 了 express 提供 的 rea.acceptsLanguages 方法 ,我 们 可 以 轻松 地 选择 用 户 的 首选 语言 。 


浏览 器 会 发 送 一 个 用 户 “ 可 接受 的 语言 ” 列表。 这 个 列表 通 
常 来 自用 户 的 浏览 器 或 操作 系统 设置 。 





然后 ,使 用 renderTostring 方法 ,调用 我 们 在 entry-serverjs 文件 中 导入 的 函数 ， 待 返回 
的 Promise 结束 后 将 应 用 泻 染 成 一 个 HTML 字符 串 。 最后, 将 结果 发 送 给 客户 端 ( 除非 在 演 染 过 
程 中 发 生 了 错误 )。 


6. 运行 SSR 应 用 




















现在 是 时 候 运 行 应 用 了 。 修改 aev 脚本 ,使 应 用 运行 express 服务 器 而 不 是 webpack-dev- 


SOFEVEL: 


"dev": "node server", 


重启 脚本 刷新 应 用 。 为 了 确保 SSR 运行 正常 ， 需 要 查看 页 面 源 代 码 。 





< DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Fashion Store</title> 
<link rel="preload" href="/dist/manifest.c6é9ddec6abdcedcb56a9.ijs" as="script"><link 
rel="preload" href="/dist/vendor.aée8017e514f497280bd.ijs" as="script"><link rel="preload" 
href="/dist/main.de9le0e9b3d5804143cd.js" as="script"><link rel="prefetch" href="/dist 
/0.21bf7785b82022f8af70.js"><link rel="prefetch" href="/dist 
/2.508433d502229d905384.js"><link rel="prefetch" href="/dist 
/3.395a70fc7d3563e990b9.js"><link rel="prefetch" href="/dist 
/1.470b338ce90ba04e6319.js"><link rel="stylesheet" href="/dist 
/common.de9le0e9b3d5804143cd.css"></head> 
<body> 
<div id="app" data-server-rendered="true"><header class="app-header" data- 
v-40a9da8b><div class="content" data-v-40a9da8b><div class="state" data-v-40a9da8b data- 
v-40a9da8b><hl class="app-name" data-v-40a9da8b><a href="/" class="]link router-link- 
exact-active router-link-active" data-v-40a9da8b>Fashion Store</a></hl><button 
class="base-button icon-button" data-v-76e42c36 data-v-40a9da8b><i class="material-icons 
icon" data-v-76e42c36>search</i><span class="content" data-v-76e42c36></span><!--—--> 























应 用 已 经 被 服务 器 泻 染 成 HIML 了 。 


很 遗憾 , 应 用 出 了 些 问 题 。 服 务 器 在 发 送 页 面 HTML 的 同时 还 发 送 了 Vuex store 数据 。 这 意 


味 着 应 用 在 初次 运行 时 i 不 过 它 还 是 会 请 求 检索 库存 商品 详情 和 
评价 。 你 可 以 看 到 这 一 点 ， 因 为 在 第 一 次 加 载 或 刷新 相应 页 面 时 都 会 显示 加 载 动画 。 


解决 方案 是 在 非 必需 的 情况 下 阻止 组 件 请 求 数据 。 
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(1) 在 PageHome .vue 组 件 中 ， 只 请 求 尚 未 拥有 的 数据 : 


mounted () { 
if (!this.items.length) { 
this.fetchItems() 
} 
中 


(2) 在 PageStoreItem.vue 组 件 中 ， 只 在 没有 对 应 数据 的 情况 下 请 求 商 品 详情 和 评价 : 


fetchData () { 
if (!this.details || this.details.id !== this.id) { 
this.fetchStoreItemDetails({ 
id: this.iqd, 
} 
} 
3 


这 样 一 来 ， 就 不 会 再 出 现 该 问题 了 。 


想 要 继续 学 习 SSR 的 相关 知识 ， 可 以 在 https://ssr.vuejs.org/zh/ 查 看 官方 文档 ,或 者 使 用 一 个 
名 为 Nuxtjs 的 框架 。Nuxtjs 非常 容易 上 手 ， 能 让 你 摆脱 大 量 抽象 的 样板 文件 。 











7.2.3 生产 环境 构建 
应 用 在 开发 环境 下 运行 得 很 顺利 ,假设 我 们 已 经 完成 了 开发 , 想 将 其 部 署 到 真实 的 服务 器 上 。 
1. 额外 的 配置 
为 了 优化 应 用 的 生产 环境 构建 ， 需 要 添加 一 些 人 额外 的 配置 。 
@ 将 样式 提取 到 CSS 文件 


到 目前 为 止 ， 样 式 是 通过 JavaScript 代码 添加 到 页 面 的 。 这 在 开发 过 程 中 很 方便 ， 因 为 能 通 
过 Webpack 进行 热 重 载 。 但 是 在 生产 环境 中 ， 建 议 将 样式 提取 到 单独 的 CSS 文件 里 。 





























(1) 在 开发 依赖 中 安装 extract-text-webpack-plugin 包 : 


npm i -D extract-text-webpack-plugin 








(2) 在 webpack/common.js 配置 文件 中 添加 一 个 新 的 isProg 变量 : 


const isProd = process.env.NODE ENV === 'production' 


(3) 修改 vue-loader 规则 ， 在 生产 环境 下 使 用 CSS 提取 并 忽略 HTML 标签 之 间 的 空白 : 


{ 
test: /\.vues$/, 
loader: 'vue-loader', 
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options: { 
extractCss: isProd, 
preserveWhitespace: false, 
} 
} 





(4) 将 ExtractTextPlugin 和 ModuleConcatenationPlugin 添加 到 文件 底部 仅 用 于 生 
产 环境 的 插件 列表 : 


if (isProd) { 

module.exports.devtool 
module.exports.plugins 
[]) .concat ([ 

A a 

new webpack .optimize.ModuleCconcatenationPlugin()， 

new ExtractTextPlugin({ 

filename: 'common.[chunkhash] .css'， 
})， 





'#source-map' 
(module.exports.plugins || 


Le | 





ExtractTextPlugin 会 将 样式 提取 到 CSS 文件 , 而 ModuleConcatenationPlugin 则 会 
优化 编译 后 的 JavaScript 代码 ， 提 升 其 运行 效率 。 


@ express 服务 器 生产 环境 


我 们 对 代码 的 最 后 一 处 修改 是 express 服务 器 中 的 bundle 泻 染 器 创建 方法 。 





将 serverjs 文件 中 的 // Topo proguction 注释 替换 成 下 面 的 代码 : 


const template = fs.readFileSync (templatePath, 'utf-8') 
const bundle = require('./dist/vue-ssr-server-bundle.json') 
const clientManifest = require('./dist/vue-ssr-client-manifest.json') 
renderer = createBundleRenderer (bundle, { 
runIinNewContext: false, 
template, 
clientManifest, 
} 


以 上 代码 将 读 取 HTML 页 面 模板 、 服 务 器 bundle 以 及 客户 端 构建 清单 ， 然 后 创建 一 个 新 的 
bundle 演 染 器 ， 因 为 在 生产 环境 下 没有 热 重 载 。 


2. 新 的 npm 脚本 























编译 后 的 代码 将 会 输出 到 项 目 根 目录 下 的 dist 文 件 夹 。 在 每 次 构建 之 间 都 需要 先 移 除 该 文件 
夹 以 保持 干净 的 状态 。 为 了 在 跨 平台 环境 下 完成 这 项 工作 , 我 们 将 使 用 rimraf 包 , 它 会 递归 地 
删除 文件 和 文件 夹 。 
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(1) 在 开发 依赖 中 安装 rimraf 包 : 


npm i -D rimraf 


(2) 为 客户 端 bundle 和 服务 器 bundle 各 添加 一 个 buila 脚本 : 


"build:client": 


"build:server": 


将 NODI 


| 








"puild": 











"cross-env NODE_ENV=production webpack --progress 
--hide-modules --config webpack/client.js", 
"cross-env NODE_ENV=production webpack --progress 
--hide-modules --config webpack/server.js", 





_ENV 环境 变量 设置 为 production， 并 对 相应 的 Webpack 配置 文件 运行 webpack 


新 建 一 个 puila 脚本 ， 用 来 清空 dist 文件 夹 并 运行 puild:client 和 pbuild:server 


"rimraf dist && npm run build:client && npm run build:server", 


(4) 添加 最 后 一 个 名 为 start 的 脚本 ， 它 会 以 生产 模式 运行 express 服务 侣 : 


"AFT: 


"cross-env NODE_ENV=production node server", 


(5) 现在 可 以 运行 构建 了 。 还 是 使 用 npm run 命令 : 


npm run build 


现在 dist 文件 夹 应 该 包含 了 Webpack 生成 的 所 有 块 ， 以 及 服务 器 bundle 


JSON 文件 。 


和 客户 端 构建 清单 





JS 


0.8e02835c1635 
de7407a9.js 


2.012b7e77045f5 
65c544c.js.map 


Js 


main.e18794f783 
389629f591.js 


xj 


Vue-ssr-server- 
bundle.json 





0.8e02835c1635 
de7407a9.js.map 


JS 


3.7c35ac4a96ff7 
4d43b2f.js 


main.e18794f783 
389629...1.js.map 


JS 


1.e00f54e6186a4 
9f58191.js 


3.7c35ac4a96ff7 
4d43b2fjs.map 


JS 


manifest. 
09703d...21e39.js 


1.e00f54e6186a4 
9f58191.js.map 


吉 


common.e18794f 
783389...f591.css 


manifest. 
09703d...9.js.map 


JS 


2.012b7e77045f5 
65c544c.js 


common.e18794f 
783389....css.map 


可 


vue-ssr-client- 
manifest.json 
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6 这 些 就 是 要 上 传 到 真实 Node.js 服务 器 上 的 文件 。 


(6) 现在 启动 express 服务 器 : 


npm start 


此 外 ， 还 需要 将 server.js、package.json 和 package-lock.json 文件 上 传 到 真实 的 服 
2 别 忘 了 运行 npm install 命令 安装 所 有 的 依赖 。 


7.3 ”小结 


本 章 ， 我 们 学 习 了 如 何 使 用 PostCSS 给 CSS 加 前 级 ， 如 何 使 用 ESLint 进行 代码 检查 以 提升 
代码 质量 ， 以 及 如 何 使 用 Jest 对 组 件 进 行 单元 测试 等 内 容 ， 从 而 改进 了 开发 工作 流程 。 我 们 还 进 
一 步 学 习 了 如 何 通过 vue-il8n 包 和 动态 导入 添加 本 地 化 支持 ,以 及 如 何在 通过 重 构 项 目 来 实现 
服务 端 演 染 的 同时 享受 Webpack 的 热 重 载 、 代 码 拆 分 和 优化 等 优秀 特性 。 


在 最 后 一 章 ， 我 们 将 使 用 Meteor 全 栈 框架 和 Vue 创建 一 个 简单 的 实时 应 用 。 
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最 后 一 章 ， 我 们 会 配合 一 个 完全 不 同 的 栈 一 起 使 用 Vue 


我 们 将 探索 这 个 JavaScript 全 栈 框架 并 构建 一 个 实时 仪表 盘 ， 用 来 监控 商品 的 生产 。 本 章 将 
探讨 以 下 主题 : 
口 安装 Meteor 并 设置 项 目 ; 
口 使 用 Meteor 方 法 将 数据 保存 到 Meteor 集合 〈 collection ) 中 ; 
口 在 Vue 组件 中 订阅 该 集合 并 使 用 数据 。 


该 应 用 有 一 个 包含 多 个 指示 器 的 主页 ， 如 下 图 所 示 。 


这 就 是 Meteor! 








Dashboard SN 


Production Dashboard 


rN\r 


Average Errors 
50 28% 
28/10/2017 a 03:31:58 37 
28/10/2017 a 03:31:58 3 
28/10/2017 a 03:31:57 Error 49 
28/10/2017 8 03:31:56 26 
28/10/2017 a 03:31:56 Error 87 








28/10/2017 8 03:31:56 47 
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它 还 有 一 个 包含 多 个 按钮 的 页 面 , 用 来 生成 假 的 测量 记录 。 这 是 因为 我 们 并 不 是 真 的 拥有 这 
些 传 感 需 。 





8.1 项 目 设 置 


第 一 部 分 将 介绍 Meteor 并 创建 一 个 能 在 该 平台 上 正常 运行 的 简单 应 用 。 





8.1.1 什么 是 Meteor 




















Meteor 是 一 个 用 于 构建 Web 应 用 的 全 栈 JavaScript 框架 。 
Meteor 栈 主要 由 以 下 元 素 构成 : 


口 Web 客户 端 (可 以 使 用 任意 前 端 库 ， 如 React 或 Vue )， 包 含 一 个 名 为 minimongo 的 客户 
端 数 据 库 ; 

口 基于 Node,js 的 服务 器 ， 支 持 现 代 的 ES2015+ 特 性 ， 包 括 importy/export 请 法; 

口 服务 器 使 用 MongoDB 实时 数据 库 ; 

口 客户 端 和 服务 器 的 通信 是 抽象 的 ， 客 户 端 和 服务 端 数据 库 能 方便 地 实时 同步 ; 

口 可 选 的 混合 移动 应 用 ( Android 和 iOS )， 能 用 一 条 命令 构建 ; 

口 完整 的 开发 者 工具 ， 如 功能 强大 的 命令 行 实用 程序 和 易 用 的 构建 工具 ; 
口 Meteor 专用 包 ( 你 也 可 以 使 用 npm 包 )。 


从 上 面 可 以 看 出 ， 到 处 都 用 到 了 JavaScript。Meteor 还 鼓励 你 在 客户 端 和 服务 端 共享 代码 。 


由 于 Meteor 管理 着 整个 栈 ， 它 提供 了 很 多 用 法 简单 、 功 能 强大 的 系统 。 举 个 例子 ， 整 个 栈 
是 实时 响应 式 的 ， 如 果 客 户 端 向 服务 器 发 送 一 个 更 新 ,那么 所 有 其 他 客户 端 都 会 收 到 新 的 数据 ， 
并 且 客 户 端 UI 也 会 自动 更 新 。 






































Meteor 没有 使 用 Webpack, 而 是 有 自己 名 为 IsoBuild 的 构建 系统 。Meteor 将 重心 
放 在 易 用 性 上 ( 零 配 置 )， 不 过 这 也 导致 其 灵活 性 不 足 。 


8.1.2 安装 Meteor 


如 果 你 的 系统 上 没有 安装 Meteor， 可 以 前 往 Meteor 官方 网 站 的 安装 指南 页 面 https:/www. 
meteor.comyinstall， 根 据 你 的 操作 系统 进行 安装 。 


安装 完成 后 ， 可 以 通过 下 面 的 命令 检查 Meteor 是 否 安装 成 功 : 


meteor --version 


























这 条 命令 会 显示 当前 Meteor 的 版 本 。 
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8.1.3 创建 项 目 
既然 Meteor 已 经 安装 好 了 ， 我 们 来 创建 一 个 新 的 项 目 吧 。 
(1) 使 用 meteor create 命令 创建 我 们 的 第 一 个 Meteor 项 目 : 


meteor create --bare <folder> 
cd <folder> 


--bare 参数 告诉 Meteor 我 们 要 创建 一 个 空 的 项 目 。 默认 情况 下 , Meteor 会 生成 一 些 我 们 并 
不 需要 的 样板 文件 ， 所 以 这 个 参数 让 我 们 无 须 再 去 删除 这 些 文件 了 。 


(2) 接 下 来 ， 需 要 安装 两 个 Meteor 专用 包 : 一 个 用 于 编译 Vue 组件， 另 一 个 则 用 于 编译 这 些 
组 件 中 的 Stylus。 使 用 meteor adg 命令 安装 这 两 个 包 : 


meteor add akryum:vue-component akryum:vue-stylus 





















































(3) 还 需要 从 npm 安装 vue 和 vue-router 这 两 个 包 : 





meteor npm i -S vue vue-router 


注意 ， 我 们 要 使 用 命令 meteor npm 而 不 是 npm， 这 样 做 是 为 了 拥有 和 Meteor 
相同 的 环境 (Node.js 和 npm 版 本 )。 





(4) 运行 meteor 命令 ， 即 可 在 开发 模式 下 启动 该 应 用 : 


meteor 


Meteor 会 启动 一 个 HTTP 代理 、 一 个 MonoDB 和 Node.js 服务 器 。 























它 还 会 显示 访问 该 应 用 的 URL 链接 ,但 是 如 果 现 在 打开 它 ， 将 会 显示 一 个 空白 页 面 。 





8.1.4 第 一 个 Vue Meteor 应 用 
我 们 将 在 应 用 中 显示 一 个 简单 的 Vue 组件。 


(1) 在 项 目 目 录 下 创建 一 个 新 的 index.html 文件 ， 并 告诉 Meteor 我 们 要 在 页 面 的 主体 内 添加 
一 个 id 为 app 的 div 元 素 : 


<head> 
<title>Production Dashboard</title> 
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</head> 
<body> 

<div id="app"></div> 
</body> 


这 并 不 是 一 个 真正 的 HTML 文件 ， 而 是 一 个 可 以 向 最 终 HTML 页 面 的 head 或 
个 body 注入 额外 元 素 的 特殊 格式 。 在 这 里 ，Meteor 会 在 head 中 添加 一 个 title 
元 素 ， 并 在 body 中 添加 一 个 <div>。 


(2) 创建 一 个 新 的 client 文件 来 和 componets 子 文件 来 ， 并 在 其 中 创建 一 个 包含 简单 模板 的 


App .vue 组 件 : 


<!-- client/components/App.vue --> 
<template> 
<div id="#app"> 
<hi>Meteor</hil> 
</div> 
</template> 


(3) 下 载 这 个 Stylus 文件 (参见 源 代码 文件 中 的 chapter8-full/client 文件 夹 ) 至 client 文件 夹 并 
将 其 添加 到 App .vue 组 件 : 


<style lang="stylus" src="../style.styl" /> 
(4) 在 client 文件 夹 中 创建 一 个 main.js 文件 ， 用 于 在 Meteor .startup 钩子 里 面 启 动 Vue 
应 用 : 


import { Meteor } from 'meteor/meteor' 


import Vue from 'vue' 
import App from './components/App.vue' 


Meteor.startup(() => { 
new Vue (1 
el: '#app', 
.. .App, 
} 
} 


在 Meteor 应 用 中 ,建议 在 Meteor.startup 钩子 内 创建 你 的 Vue 应 用 ,这样 可 


空 比 


以 保证 整个 Meteor 系统 在 启动 前 端 之 前 准备 完毕 。 


外 这 段 代码 只 会 在 客户 端 运行 ， 因 为 该 文件 在 client 文件 天 内 。 





现在 你 已 经 拥有 一 个 能 在 浏览 器 中 显示 的 简单 应 用 了 ,可 以 打开 Vue 开发 者 工具 检查 页 面 中 
是 否 有 App 组 件 。 
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8.1.5 ”路 由 


下 面向 应 用 中 添加 一 些 路 由 。 应 用 将 拥有 两 个 页 面 : 一 个 包含 指示 顺 的 仪表 盘 ， 以 及 一 个 拥 
有 多 个 按钮 (用 于 生成 假 数据 ) 的 页 面 。 


(1) 在 client/components 文件 夹 中 , 创建 两 个 新 组 件 ProductionGenerator.vue 和 Produc- 
tionDashboard.vueo 


(2) 紧 挨 main.js 文件 ， 在 routerjs 文件 中 创建 路 由 器 : 


impor 
impor 








t Vue from 'vue' 

t VueRouter from 'vue-router' 
import ProductionDashboard from 
'./components/ProductionDashboard.vue' 
import ProductionGenerator from 
'./components/ProductionGenerator.vue' 





Vue.use (VueRouter) 


const routes = [ 
{ path: '/', name: 'dashboard', component: ProductionDashboard 
es 
{ path: '/generate', name: 'generate', 
component: ProductionGenerator }, 


] 


const router = new VueRouter(t{ 
mode: 'history', 
routes, 


}) 


export default router 


(3) 接着 ， 在 main.js 文件 中 导入 路 由 器 并 将 其 注入 应 用 ， 就 像 我 们 在 第 5 章 中 所 做 的 那样 。 
(4) 在 App.vue 组 件 中 ， 添 加 导航 菜单 和 路 由 器 视图 : 


<nav> 
<router-link :to="{ name: 'dashboard' }" exact>Dashboard 
</router-link> 
<router-link :to="{ name: 'generate' }">Measure</router-link> 
</nav> 





<router-view /> 


现在 ， 应 用 的 基础 结构 就 完成 了 。 


Measure 





Production Dashboard 
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8.2 产品 测量 记录 
我 们 要 做 的 第 一 个 页 面 是 测量 记录 页 面 (Measure )， 上 面 有 两 个 按钮 ; 
口 第 一 个 按钮 会 生成 一 条 假 的 产品 测量 记录 ， 其 中 包含 当前 日 期 ( date ) 和 一 个 随机 值 


(value ); 


口 第 二 个 按钮 同样 生成 一 条 测量 记录 ， 但 会 将 error 属性 设 为 true。 
所 有 这 些 记 录 将 被 存放 在 一 个 名 为 Measures 的 集合 里 。 
































8.2.1 集成 Meteor 集合 


Meteor 集合 是 一 个 响应 式 对 象 的 列表 ， 类 似 于 MongoDB 集合 。( 事实 上 ， 它 的 底层 使 用 了 
MongoDB。) 


我 们 需要 使 用 一 个 Vue 插件 将 Meteor 集合 集成 到 应 用 中 ， 用 于 应 用 的 自动 更 新 。 























(1) 添加 vue-meteor-tracker npm 包 : 


meteor npm i -S vue-meteor-tracker 


(2) 然后 在 Vue 中 安装 下 面 的 库 


Import VueMeteorTracker from 'vue-meteor-tracker' 








Vue .use (VueMeteorTracker) 


(3) 使 用 meteor 命令 重新 启动 Meteor。 
现在 应 用 能 够 识别 Meteor 集合 了 ， 这 样 我 们 就 能 在 组 件 中 使 用 它们 了 。 稍 后 我 们 就 会 这 
样 做 。 
8.2.2 ”设置 数据 
下 一 步 是 设置 Meteor 集 合 ， 用 于 存储 测量 记录 数据 。 
1. 添加 集合 


我 们 会 将 记录 存储 到 一 个 名 为 Measures 的 Meteor 集 合 中 。 在 项 目 日 录 下 创建 一 个 新 的 lib 
文件 夹 ， 其 中 的 所 有 代码 都 将 最 先 执行 ， 包 括 客户 端 和 服务 端 代码 。 在 该 文件 夹 内 创建 一 个 
collections.js 文件 ， 我 们 将 在 里 面 声明 Measures 集合 : 


import { Mongo } from 'meteor/mongo' 


export const Measures = new Mongo.Collection('measures') 8 
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2. 添加 一 个 Meteor 方法 


Meteor 方法 是 客户 端 和 服务 端 都 会 调用 的 特殊 函数 。 这 对 于 更 新 集合 数据 很 有 用 , 能 提高 应 
用 的 感知 速度 一 一 客户 端 会 直接 在 minimongo 中 执行 ， 不 必 等 待 服务 器 接收 并 处 理 。 


























(机 这 一 技术 称 为 “乐观 更 新 ”( optimistic update ), 在 网 络 条 件 差 的 情况 下 非常 有 效 。 


在 lib 文件 夹 下 的 collection.js 文件 旁边 ， 创 建 一 个 新 的 methods,js 文件 。 然 后 添加 一 个 
measure.add 方法 ， 用 于 向 Measures 集合 插入 新 的 测量 记录 : 


import { Meteor } from 'meteor/meteor' 
import { Measures } from './collections' 











Meteor.methods({ 
'measure.add' (measure) { 
Measures .insert ({ 
... measure， 
date: new Date(), 
}) 
}; 
} 


现在 ， 我们 可 以 通过 Meteor .call 函数 调用 这 个 方法 : 

Meteor.call('measure.add', someMeasure) 

客户 端 (使 用 名 为 minimongo 的 客户 端 数 据 库 ) 和 服务 器 均 会 执行 这 个 方法 。 这样， 客户 端 
就 会 立即 更 新 。 























8.2.3 ”模拟 测量 记录 
闲话 少 叙 ， 我 们 来 构建 一 个 调用 measure .adqg Meteor 方 法 的 简单 组 件 。 
(1) 在 ProductionGenerator.vue 模板 中 添加 两 个 按钮 : 


<template> 
<div class="production-generator"> 
<h1>Measure production</h1l> 





<section class="actions"> 
<button @click="generateMeasure (false)">Generate Measure</button> 
<button @click="generateMeasure (true)">Generate Error</button> 
</section> 
</div> 
</template> 


(2) 接着 ， 在 组 件 脚本 中 创建 一 个 generateMeasure 方法 用 于 生成 一 些 假 数据 ， 然 后 调用 
measure .add Meteor 方 法 : 








8.2 ”产品 测量 记录 271 





<script> 
import { Meteor } from 'meteor/meteor' 


export default { 
methods: { 
generateMeasure (error) { 
const value = Math.round(Math.random() * 100) 
const measure = { 
value, 
error, 
} 
Meteor.call('measure.add', measure) 
3 
}; 
i: 


</script> 


组 件 看 起 来 应 该 像 下 面 这 样 。 


Dashboard 





Measure production 


Generate Measure Generate Error 











如 果 点 击 按钮 ， 应 该 看 不 到 有 什么 变化 。 


检查 数据 

我 们 可 以 用 一 个 简单 的 方法 来 查看 代码 是 否 运行 正常 ,并 验证 能 否 向 Measures 集合 添加 条 
目 一 一 那 就 是 使 用 一 条 简单 的 命令 连接 到 MongoDB 数据 库 。 

在 男 一 个 终端 里 ， 运 行 下 面 的 命令 来 连接 应 用 的 数据 库 : 


meteor mongo 


汰 后 输入 下 面 的 MongoDB 查询 语句 , 以 获取 measure 集合 的 文档 ( 创建 Measures Meteor 
集合 时 使 用 的 参数 ): 


db.measures.find({}) 


如 有 果 点 击 按钮 终端 就 会 显示 测量 记录 文档 列表 。 
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这 就 意味 着 我 们 的 Meteor 方 法 能 够 正常 运行 ， 对 象 也 插入 到 了 MongoDB 数据 库 中 。 





8.3 仪表 盘 和 报告 
现在 第 一 个 页 面 已 经 完成 了 ， 我 们 要 继续 开发 实时 仪表 盘 。 


8.3.1 进度 条 库 


为 了 证 指示 顺 更 漂亮 一 些 ， 我 们 需要 安装 另 一 个 使 用 SVG 路 径 来 绘 





样 ， 我 们 就 和 


已 Z 人 二 
给 








判 半圆 形 的 进度 条 了 。 


(]) 在 项 目 中 添加 vue-progress-path npm 包 : 


meteor npm i -S vue-progress-path 


需要 告诉 Meteor 的 Vue 编译 器 ， 不 要 处 理 node_modules 文件 夹 中 的 文件 ， 该 文件 夹 用 于 保 


存 安装 包 。 




















央 进 度 条 的 Vue 库 。 这 





(2) 在 项 目 根 目录 下 创建 一 个 新 的 .vueignore 文件 。 这 个 文件 的 工作 原理 类 似 于 .gitignore， 




















一 行 都 是 用 于 忽略 一 些 路 径 的 规则 。 以 斜 杠 / 结 束 的 规则 会 忽略 对 应 的 文件 来。 因此 ，.vueignore 
文件 的 内 容 如 下 所 示 : 


node_modules/ 


(3) 最 后 ， 在 client/main.js 文件 中 安装 vue-progress-path 插件 : 


import 'vue-progress-path/dist/vue-progress-path.css' 
import VueProgress from 'vue-progress-path' 


Vue.use (VueProgress, { 
defaultShape: 'semicircle', 


}) 


8.3.2 ”Meteor 发 布 


为 了 同步 数据 , 客户 端 必须 订阅 在 服务 器 上 声明 的 一 个 发 布 (publication )。Meteor 发 布 是 一 
个 返回 Meteor 集合 查询 的 函数 ， 可 以 接受 收 参 数 来 过 滤 将 要 同步 的 数据 。 
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在 本 应 用 中 ， 我 们 只 需要 一 个 能 发 送 所 有 Measures 集合 文档 的 简单 measures 发 布 。 





该 代码 应 该 只 在 服务 器 上 运行 。 因 此 , 在 project 文件 夹 中 创建 一 个 新 的 server 文件 来， 并 在 
其 中 创建 一 个 新 的 publications.js 文件 : 


import { Meteor } from 'meteor/meteor' 
import { Measures } from '../lib/collections' 





Meteor.publish('measures', function () { 
return Measures.find({}) 


} 


(把 因为 这 段 代码 在 名 为 server 的 文件 夹 中 ， 所 以 只 会 在 服务 器 上 运行 。 


8.3.3 创建 仪表 盘 组 件 


构建 prodquctionDashboard 组 件 的 准备 工作 已 经 做 完了 。 由 于 之 前 安装 了 vue-meteor- 
tracker 包 , 我 们 有 一 个 新 的 组 件 定义 选项 meteor。 这 个 对 象 用 于 描述 需要 订阅 的 发 布 ， 以 及 
组 件 需要 检索 的 集合 数据 。 


(1) 添加 下 面 这 个 定义 了 meteor 选项 的 脚本 : 








<script> 
export default { 
meteor: { 
// 在 此 处 进行 订阅 和 集合 查询 
} 
} 


</script> 
(2) 在 meteor 选项 内 部 ,使 用 $subscripe 对 象 订阅 measures 发 布 : 
meteor: { 
$subscribe: { 
‘measures': []， 


} 
} 


6 这 个 空 数组 表示 我 们 没有 向 发 布 传递 参数 。 


(3) 通过 在 meteor 选项 内 对 Measures Meteor 集合 进行 查询 来 检索 测量 记录 ; 


meteor: { 
Rs 


measures () { 
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return Measures.find({}, { 
SOrt:  t :dates =1 
} 
a 
} 


find 方法 的 第 二 个 参数 是 一 个 与 MongoDB JavaScript API 十 分 类 似 的 选项 对 
象 。 这里， 我 们 借助 选项 对 象 的 sort 属性 , 按 日 期 递减 的 顺序 对 文档 进行 排序 。 


(4) 最 后 ， 创 建 measures 数据 属性 并 将 其 初始 化 为 一 个 空 数组 。 
现在 ， 组件 脚 本 应 该 是 下 面 这 样 的 : 


<script> 
import { Measures } from '../../lib/collections' 


export default { 
data. ()- { 
return { 
measures: [], 
} 
二 


meteor: { 
$subscribe: { 
'measures': [], 


}, 


measures () { 
return Measures.find({}, { 
sort: { date: -1 }, 
} 
有 
下 
} 


</script> 


在 浏览 器 开发 者 工具 中 ， 你 可 以 查看 组 件 是 否 检索 了 集合 中 的 项 。 




















1. 指示 器 
我 们 将 为 仪表 盘 指 示 器 创建 一 个 独立 的 组 件 ， 步 又 如 下 。 


(1) 在 components 文件 夹 中 ， 创 建 一 个 新 的 ProductionIndicator.vue 组 件 。 
(2) 声明 一 个 模板 ， 用 于 显示 进度 条 、 标 题 以 及 额外 的 文本 信息 : 














<template> 
<div class="production-indicator"> 
<loading-progress :progress="value" /> 
<div class="title">{{ title }}</div> 
<div class="info">{{ info }}</div> 
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</div> 
</template> 


(3) 添 加 value、title 和 info prop: 


<script> 
export default { 
DroBsr 半 
value: { 
type: Number, 
required: true, 
} 
title: String, 
info: [String, Number], 
j 
} 


</script> 


(4) 回 到 ProductionDashboard 组 件 ， 计 算 平 均值 以 及 错误 率 : 


computed: { 
length () { 
return this.measures.length 
} 


Nd 


average () { 
if (!this.length) return 0 
let total = this.measures.reducel 
(total, measure) => total += measure.value, 
0 
) 
return total / this.length 
} 


errorRate () { 
if (!this.length) return 0 
let total = this.measures.reducel 
(total, measure) => total += measure.error ? 1 : 0, 
Q 
) 
return total / this.length 
}, 
} 


在 前 面 的 代码 片段 中 , 我 们 将 measures 数组 的 长 度 缓存 到 一 个 名 为 length 的 


计算 属性 中 。 
(5) 在 模板 内 添加 两 个 指示 器 ， 一 个 显示 平均 值 ， 另 一 个 显示 错误 率 : 
<template> 


<div class="production-dashboard"> 
<hl>Production Dashboard</h1> 
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<section class="indicators"> 
<ProductionIndicator 
:value="average / 100" 
title="Average" 
:info="Math.round (average)" 
/> 
<ProductionIndicator 
class="danger" 
:Value="errorRate" 
title="Errors" 
:info=" $s{Math.round (errorRate * 100)}% " 
/> 
</section> 
</div> 
</template> 


人 别 忘 了 将 ProductionIndicator 导入 组 件 中 ! 

















指示 顺 看 起 来 应 该 是 这 样 的 。 


FrF\r 


Average Errors 
50 28% 














2. 列 出 测量 记录 
最 后 ， 我 们 需要 在 指示 器 下 面 列 出 测量 记录 。 


(1) 添加 一 个 简单 的 <aiv> 元 素 列表 ， 用 于 存放 每 条 测量 记录 ， 并 显示 日 期 、 是 否 有 错误 ， 
以 及 值 : 


<section class="list"> 
<div 
Vv-for="item of measures" 
:key="item._id" 












































<div class="date">{{ item.date.toLocaleString() }}</div> 
<div class="error">{{ item.error ? 'Error' Ty ea 
<div class="value">{{ item.value }}</div> 
</div> 
</section> 


现在 ， 应 用 看 起 来 应 该 像 下 面 这 样 ， 包 含 一 个 导航 工具 栏 、 两 个 指示 带 以 及 测量 记录 列表 。 
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Dashboard Measure 


Production Dashboard 
Average Errors 
50 28% 
28/10/2017 a 03:31:58 37 
28/10/2017 a 03:31:58 3 
28/10/2017 a 03:31:57 Error 49 
28/10/2017 a 03:31:56 26 
28/10/2017 a 03:31:56 Error 87 
28/10/2017 a 03:31:56 47 











如 果 在 另 一 个 窗口 中 打开 应 用 并 将 这 两 个 窗口 并 排放 置 ， 你 就 能 看 到 Meteor 的 全 栈 实时 响 
应 了 。 在 一 个 窗口 中 打开 仪表 盘 ， 男 一 个 窗口 中 打开 数据 生成 页 面 。 此 时 添加 假 数据 的 话 ， 就 能 
在 男 一 个 窗口 里 看 到 实时 的 数据 更 新 。 


如 果 你 想 学 习 更 多 关于 Meteor 的 知识 ， 可 以 访问 其 官方 网 站 ( https:/www.meteor.com/ 
developers ) 以 及 整合 了 Vue 的 代码 仓库 ( https://github.com/meteor-vue/vue-meteor )。 








8.4 小 结 


在 最 后 一 章 里 ， 我 们 使 用 了 一 个 新 的 全 栈 框架 ， 名 为 Meteor。 我 们 将 Vue 整合 到 了 应 用 中 ， 
并 创建 了 一 个 Meteor 响应 式 集合 。 通 过 Meteor 方 法， 我 们 向 集合 插入 文档 并 将 数据 实时 显示 在 
仪表 盘 组 件 中 。 


虽然 本 书 已 经 到 了 尾声 , 但 我 们 使 用 Vue 的 旅程 才刚 刚 开 始 。 一 开始 , 我 们 学 习 了 模板 和 响 
应 式 数据 的 基本 概念 , 在 不 使 用 构建 工具 的 情况 下 编写 简单 的 应 用 。 即 使 没有 使 用 很 多 其 他 工具 ， 
也 能 开发 出 一 个 Markdown 记事 本 ， 甚 至 一 个 带动 画 的 浏览 器 卡 牌 游戏 。 接 着 ,我 们 使 用 一 系列 
工具 来 开发 更 大 型 的 应 用 。 官 方 命令 行 工 具 vue-cli 在 搭建 项 目的 过 程 中 帮 了 大 忙 。 单 文件 组 件 
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( .vue 文 件 ) 使 组 件 易 于 维护 和 进化 。 我 们 还 轻松 地 使 用 了 预 处 理 语言 ， 如 Stylus。 管理 多 页 面 时 
必须 使 用 官方 路 由 库 vue-router ,我 们 在 第 5 章 中 用 它 做 出 了 很 漂亮 的 用 户 系 统 以 及 私有 路 由 。 
接着 ， 我 们 进入 了 一 个 完全 不 同 的 阶段 ， 在 使 用 官方 Vuex 库 以 可 扩展 、 安 全 的 方式 开发 博客 地 
图 的 过 程 中 用 到 了 很 多 高 级 功能 ， 如 Google OAuth 和 Google 地 图 。 之 后 , 我们 通过 ESLint 提高 
了 在 线 商店 应 用 的 代码 质量 , 并 为 组 件 编写 了 单元 测试 。 我 们 甚至 为 应 用 添加 了 本 地 化 支持 以 及 
服务 端 泻 染 ， 使 其 变 得 更 为 专业 。 


现在 ,你 可 以 通过 改进 书 中 的 项 目 来 做 练习 ， 甚 至 可 以 开发 自己 的 项 目 。 使 用 Vue 可 以 提高 
你 的 技巧 ， 你 也 可 以 通过 参加 活动 、 与 社区 成 员 在 线 交 流 、 参 与 Vue 的 开发 ( https://github.com/ 
vuejs/vue ) 或 帮助 他 人 来 提高 自己 的 水 平 。 分 享 知 识 会 让 你 学 到 更 多 ， 并 且 在 自己 的 领域 做 得 
更 好 。 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


